CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tinmar
Tinmar

Reputation: 370

DIV on hover - make it can be hovered through and change it's opacity, without blinking

Ok, I have dynamically created div for a legend on a graph with class .legend.

User must be able to hover on graph lines (to see it's values), but they cannot do it through legend div which is over the graph.

enter image description here

I tried with pointer-events:none like this:

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

... and it works BUT, it blinks on every mouse move. Like every time I move pointer inside that div, whether I left div or not, it fires the event.

Is there any smoother way to do this?

The best way would be if I could, on first mouse enter, stop all mouse event listeners for that div except mouseleave, and after I leave div with pointer, it should attach again.

HTML code looks like this:

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

Any ideas, workarounds or advices would be appreciated.

Upvotes: 0

Views: 83

Answers (1)

Harish Kommuri
Harish Kommuri

Reputation: 2854

Try in Fiddle.

Use following Script.

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

Upvotes: 1

Related Questions