Div auf Schweben - machen Sie es durch und ändern Sie seine Opazität, ohne zu blinken

Question

Ok, ich habe dynamisch div für eine Legende in einem Diagramm mit der Klasse .legend erstellt.

Der Benutzer muss in der Lage sein, auf Diagrammlinien zu schweben (um seine Werte zu sehen), aber nicht durch die Legende div, die über dem Diagramm liegt.

Ich habe versucht, mit pointer-events:none wie folgt aus:

$("#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" 
); 

... und es funktioniert, aber es blinkt bei jeder Mausbewegung. Wie jedes Mal, wenn ich Zeiger innerhalb dieses div verschiebe, ob ich div verließ oder nicht, löscht es das Ereignis.

Gibt es einen reibungsloseren Weg, dies zu tun?

Der beste Weg wäre, wenn ich könnte, auf dem erste Maus eingeben, alle Zuhörer Mausereignis stoppen für die div außer mouseleave, und nachdem ich div mit Zeigern, verlassen sollte es wieder befestigen.

HTML-Code sieht wie folgt aus:

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

Irgendwelche Ideen, Abhilfen oder Ratschläge gebeten.

Answer 1

Try in Fiddle.

Verwenden Sie folgendes Skript.

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