userlkjsflkdsvm userlkjsflkdsvm - 7 months ago 25
Javascript Question

JQuery layered hovered styles

I have a row in which upon being hovered a tooltip appears. This tooltip has a slight overlap onto the row. If this overlap is being targeted, the opacity of the tooltip switches because JQuery isn't sure which one to read. I am looking to prevent this switching to occur.



$(function() {
$(".tooltip_hover").hover(function(e){
$('.tooltip2').css("opacity", "1");
},function(e){
$('.tooltip2').css("opacity", "0");
});
});

.tooltip_hover {
top:50px;
left:50px;
}
.tooltip2 {
left: 178px;
top: 555px;
width: 550px;
background-color: white;
color: black;
position: absolute;
border: #b5b5b5 solid 2px;
opacity:0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
box-shadow: 4px 4px 5px #bebebe;
}
.tooltip2:after {
position: absolute;
display: block;
content: "";
top: -13.5px;
left: 12%;
margin-left: -7px;
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-bottom: 14px solid #fff;
}
.tooltip_hover:hover {
background:#FFE100;
cursor:pointer;
}
.tooltip2:hover{
display:none;
opacity:0;
cursor: pointer;
}

<table>
<tr class=" tooltip_hover" >
<td>
<a>Nothing</a>
</td>
<td >Nothing</td>
</tr>
</table>


<div class="tooltip2">
<div style="padding-left:10px; padding-bottom:15px"> </div>
</div>





Recap: When the cursor is over the tooltip and the row, the tooltip switches opacity.

Thanks

Answer

Unless you need to interact with the tooltip itself, you can add pointer-events: none to the .tooltip2 class. This sets the element to ignore mouse events, and mouse events will target the elements under it - the tr in your case.

.tooltip2 {
    pointer-events: none,
    left: 178px;
    top: 555px;
    width: 550px;
    background-color: white;
    color: black;
    position: absolute;
    border: #b5b5b5 solid 2px;
  opacity:0;
  -webkit-transition: opacity 0.5s;
  -moz-transition:  opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition:  opacity 0.5s;
  transition:  opacity 0.5s;
    box-shadow: 4px 4px 5px #bebebe;
}