CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Amir Sherafatian
Amir Sherafatian

Reputation: 2083

Showing and hiding a div element and changing opacity in CSS

I have this markup:

<div class="contact-item"
    onmouseover="div_ContactItem_mouseover(this)">
</div>

<div id="div_ItemOver" 
 style="display: none;"
 class="contact-item-hover" 
 onmouseout="div_ItemOver_mouseout(this)">

 <div style="color: red; opacity: 1; width: 20px; height: 20px;">link1</div>
 <div style="color: red; opacity: 1; width: 20px; height: 20px;">link1</div>
 <div style="color: red; opacity: 1; width: 20px; height: 20px;">link1</div>
</div>

and these JavaScript statements:

function div_ContactItem_mouseover(e) {
 $("#div_ItemOver").show().offset($(e).offset());
};

function div_ItemOver_mouseout(e) {        
 $("#div_ItemOver").hide();
};

and these CSS rules:

.contact-item, .contact-item-hover {

 cursor: pointer;
 display: inline-block;
 border-radius: 5px; 
 margin: 0px 3px 3px 0px; 
 width: 340px; 
 height: 90px;
 border: 1px solid #244f56; 
 background-color: #f8f8f8;
}

.contact-item-hover {

 background-color: #000000;
 position: absolute;
 opacity:0.12;
 filter:alpha(opacity=12);
}

What I want:

I need to show second div with id div_ItemOver whenever a mouse is on the first div which has contact-item css class, on the first div, in addition div_ItemOver has a css opacity equals to 0.12.

What the problem is:

  1. I have links on the div_ItemOver, whenever i go on those links, a mouseout and mouseover occurs and this is causing something like a flashing on element, why? and how can I remove this flashing?

  2. I don't want to opacity 0.12 reflect on links which are inside of second div, for this, I have a inline style on those links which set its opacity to 1 but it doesn't work. How can I show those links without opacity, and completely clear?

This is my jsFiddle : http://jsfiddle.net/am1r_5h/1zrytzjw/2/

To see the problem, you need to put the mouse on the rectangle, and then move to the links on top left corner

Upvotes: 2

Views: 1739

Answers (5)

Raein Hashemi
Raein Hashemi

Reputation: 3384

  1. This problem can be solved by adding both mouseover and mouseout handlers to both the divs.
  2. The second one can be solved by putting background: rgba(0, 0, 0, 0.12); instead of background-color: #000000; and opacity:0.12;

http://jsfiddle.net/1zrytzjw/10/

Upvotes: 1

rc_luca
rc_luca

Reputation: 76

1) I've replaced your Javascript mouseover/mouseout functions with jQuery .hover(), which takes mouseon and mouseout arguments http://api.jquery.com/hover/. The flickering is no longer present.

2) I'm not sure exactly when you want what level of opacity, but you can change it in the .css() events for mouseon and mouseout as well as in the CSS style for the initial opacity.

 $("#div_ItemOver").css({"opacity":"1"})

I referenced #div_ItemOver in the hover event so that the opacity change stays when you hover over this part as well.

$(".contact-item, #div_ItemOver").hover()

Some additional changes:

  • I put your styling into CSS as you were using the same style in multiple places
  • I used Position and Float to make your links show up over contact-item DIV

Here's the jsfiddle http://jsfiddle.net/1zrytzjw/8/

Upvotes: 1

Brad Schvaneveldt
Brad Schvaneveldt

Reputation: 51

You can simply fix this by putting the hidden div inside the first div. So just move the closing div tag of the first div to the bottom.

I think the reason why it is flashing is because when it hits those "link" divs, the mouseover state is broken, hiding the div with your links, but because your mouse is still there, it is immediately moused over the first div and therefore shows the links again. Putting the hidden div inside makes it so the links are part of the div that has the mouseover associated with it, so the mouseover now includes the links. I hope that makes sense.

Upvotes: 0

Gabor
Gabor

Reputation: 560

1) I won't go into the gritty details, but this has to do how eventbubbling occurs when a child element is triggered, it will also produce effects upon the parent automatically. You can solve your flickering by adding e.stopPropagation(); to the beginning of your div_ItemOver_mouseout(). So it would look like this:

function div_ItemOver_mouseout(e) {        
   e.stopPropagation();
   $("#div_ItemOver").hide();
};

2) To your second problem, is it a possibility for you to do away with the opacity/filter setting, and rather try a background-color: rgba(R, G, B, A); format? That way, if you change the following changes to your CSS, then your elements will look as you wished them to:

.contact-item-hover {
    background-color:rgba(240, 240, 240, 0.25);
    position: absolute;
}

.contact-item-hover > div{
   background-color:rgba(240, 240, 240, 0.85);
   width:50px;
   height:20px;
   color:red;
}

The .contact-item-hover > div actually references your links, so you don't have to add the inline styles to each and every link you have.

Upvotes: 1

Birgit Martinelle
Birgit Martinelle

Reputation: 1889

if you assign the same handlers to both divs your flickering is gone:

http://jsfiddle.net/1zrytzjw/4/

<div id="div_ItemOver" style="display: none;" class="contact-item-hover" onmouseover="div_ContactItem_mouseover(this)" onmouseout="div_ItemOver_mouseout(this)">
...
</div>

<div class="contact-item"  onmouseover="div_ContactItem_mouseover(this)" onmouseout="div_ItemOver_mouseout(this)"></div>

If you add console.logs to your original fiddle you will see that you actually get mouseout events every time you hover over a link, which causes the flicker.

Upvotes: 2

Related Questions