DIV悬停 - 让它可以悬停并改变它的不透明度，而不会闪烁

Question

好的，我已经为类div的图表上的图例动态创建了.legend。

用户必须能够将鼠标悬停在图表行上（以查看其值），但他们无法通过图表上的图例div进行操作。

我尝试使用pointer-events:none这样：

$("#placeholder").on({ 
    mouseenter: 
       function() 
       { 
        $(".legend").css("opacity", "0.2");
        $(".legend").css("pointer-events", "none");
       }, 
    mouseleave: 
       function() 
       { 
        $(".legend").css("opacity", "1");
        $(".legend").css("pointer-events", "auto");
       } 
   }, ".legend"
);

......它的工作原理但是每次鼠标移动都会闪烁。就像我每次在div内移动指针一样，无论我是否离开div，它都会触发事件。

有没有更顺畅的方法呢？

最好的方法是，如果我可以在第一次鼠标输入时停止div除mouseleave之外的所有鼠标事件监听器，并且在我使用指针离开div后，它应该再次附上。

HTML代码如下所示：

<div id="placeholder">

...

  <div class="legend">
    <div style="position: absolute; width: 114px; height: 48px; top: 17px; right: 19px; opacity: 0.85; background-color: rgb(255, 255, 255);"></div>
    <table style="position:absolute;top:17px;right:19px;;font-size:smaller;color:#545454">
      <tbody>
      <tr><td class="legendColorBox"><div style="border:1px solid #ccc;padding:1px"><div style="width:4px;height:0;border:5px solid darkorange;overflow:hidden"></div></div></td><td class="legendLabel">Temperature (C)</td></tr>
      <tr><td class="legendColorBox"><div style="border:1px solid #ccc;padding:1px"><div style="width:4px;height:0;border:5px solid blue;overflow:hidden"></div></div></td><td class="legendLabel">Minimum: 22.48 C</td></tr>
      <tr><td class="legendColorBox"><div style="border:1px solid #ccc;padding:1px"><div style="width:4px;height:0;border:5px solid red;overflow:hidden"></div></div></td><td class="legendLabel">Maximum: 24.85 C</td></tr>
      </tbody>
    </table>
  </div>

...

</div>

任何想法，变通方法或建议都将不胜感激。

Answer 1

Try in Fiddle

使用以下脚本。

$("#placeholder").mouseenter(function() {
    $(".legend").animate({opacity: 0.25}, 600);
}).mouseleave(function() { 
    $(".legend").animate({opacity: 1}, 600);
});