Here is the code snippet I am working with:
<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>
Additionally, I have implemented the following JavaScript functions:
function div_ContactItem_mouseover(e) {
$("#div_ItemOver").show().offset($(e).offset());
};
function div_ItemOver_mouseout(e) {
$("#div_ItemOver").hide();
};
And applied these CSS styles:
.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);
}
My objective is to display the second div with id div_ItemOver when hovering over the first div with the contact-item css class. Additionally, ensure that the div_ItemOver has an opacity of 0.12.
The issues I am facing are:
When moving the mouse over the links within the
div_ItemOver, there is a flashing effect due tomouseoutandmouseoverevents occurring. How can this be resolved to prevent the flashing?I want to remove the opacity reflection on the links within the second div by setting their opacity to
1using an inline style, but it doesn't work as expected. What is the correct way to show those links without any opacity and completely clear?
You can view the issue in action on my jsFiddle: http://jsfiddle.net/am1r_5h/1zrytzjw/2/
To replicate the problem, hover over the rectangle and then move to the links on the top left corner.