Question

我有一行在其中出现一个工具提示出现。此工具提示与行略有重叠。如果目标是重叠，则工具提示的不透明度会切换，因为JQuery不确定要读取哪一个。我希望防止这种转换发生。

$(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>

回顾：当光标位于工具提示和行上时，工具提示会切换不透明度。

由于

Answer 1

除非您需要与工具提示本身进行互动，否则可以将pointer-events: none添加到.tooltip2课程。这会将元素设置为忽略鼠标事件，鼠标事件将定位其下的元素 - 在您的情况下为tr。

.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;
}

JQuery分层悬停的样式

1 个答案: