CODEWITHSUNDEEP
jquerysvg
Norbert Hoffmann
Norbert Hoffmann

Reputation: 21

jQuery 'mouseenter mouseleave' function doesn't work

I've made a svg map with filter. I'd like to highlight svg paths or rects when filter lists element on hover. I use jQuery 'mousenter, mouseleave' function but on 'mouseleave' added class is not has been removed and the svg paths stay higlighted.

jQuery(document).ready(function() {

  jQuery('.descriptions li').on('mouseenter mouseleave', function(e) {
    var curClass = jQuery(this).attr("class");
    if (e.type == "mouseenter") {
      jQuery("." + curClass).addClass("highlighted");
    } else {
      jQuery("." + curClass).removeClass("highlighted");
    }
  });
});
path,
rect {
  fill: #BFBFBF;
}

.highlighted {
  fill: #F5902B;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="map-filter">
  <ul class="filter descriptions">
    <li class="option_1"><a href="">Option_1</a></li>
    <li class="option_2"><a href="">Option_2</a></li>
    <li class="option_3"><a href="">Option_3</a></li>
    <li class="option_4"><a href="">Option_4</a></li>
    <li class="option_5"><a href="">Option_5</a></li>
  </ul>
</div>
<div class="map-wrapper">
  <svg width="100%" height="100%" viewBox="0 0 800 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:2;">
    <g transform="matrix(0.416667,0,0,0.555556,0,0)">
        <g transform="matrix(2.39037,0,0,1.79883,-1266.71,-399.967)" >
            <path class="option_1 option_2 option_3" d="M870.662,271.437L819.238,271.437L819.477,286.53L688.87,286.53L688.918,236.997L639.821,236.997L639.821,428.754L709.828,428.754L709.828,438.128L870.748,438.128L870.662,271.437Z" />
        </g>
        <g transform="matrix(2.4551,0,0,1.79476,-1323.18,-398.465)">
            <rect class="option_2 option_3 option_4" x="872.947" y="315.892" width="33.705" height="122.356"  />
        </g>
        <g transform="matrix(2.33176,0,0,1.79476,-1127.2,-398.465)">
            <path  class="option_1" d="M877.229,365.035L877.229,315.892L872.947,315.892L872.947,438.249L912.059,438.249L912.059,365.035L877.229,365.035Z"  />
        </g>
        <g transform="matrix(2.34983,0,0,1.79476,-1126.18,-398.465)">
            <path class="option_5"   d="M906.652,315.892L872.947,315.892L872.947,363.007L906.652,363.007L906.652,447.615L935.25,447.615L935.25,353.568L913.058,353.568L913.058,335.671L936.997,335.671L936.997,327.961L906.652,327.961L906.652,315.892Z"  />
        </g>
   </g>
</svg>
</div>

Upvotes: 0

Views: 54

Answers (2)

Flash Thunder
Flash Thunder

Reputation: 12036

This is because you are finding an element by class, and it has more than one class when highlighted.

When you mouseenter, curClass is for example option_5. And it's kinda ok (but not a pretty way) to select an element by it with "." + curClass selector, as it converts to .option_5. But when leaving, the class is option_5 highlighted, so selector .option_5 highlighted is not valid. Should be .option_5.highlighted, as it represents 2 different classes.

How to fix that? Well... the easiest and clean way would be to add id's to chart elements and select them via id with #id selector, not by class. But I suppose that would ruin the idea of multihighlighting, so...

The other solution would be to remove highlighted from class selector, like this (not a pretty way):

jQuery('.descriptions li').on('mouseenter mouseleave', function(e) {
    var curClass = jQuery(this).attr("class").replace(/\shighlighted/g,''); // <- here
    if (e.type == "mouseenter") {
      jQuery("." + curClass).addClass("highlighted");
    } else {
      jQuery("." + curClass).removeClass("highlighted");
    }
  });

The third soluion, a bit prettier is to just remove .highlighted class from every element onmouseout:

jQuery('.descriptions li').on('mouseenter mouseleave', function(e) {
    var curClass = jQuery(this).attr("class");
    if (e.type == "mouseenter") {
      jQuery("." + curClass).addClass("highlighted");
    } else {
      jQuery(".highlighted").removeClass("highlighted");
    }
  });

Upvotes: 0

enxaneta
enxaneta

Reputation: 33024

In your code you have onmouseout="hideTooltip();. In your javascript you don't have a hideTooltip function. You need to remove onmouseout="hideTooltip();

Instead ot adding and removing a class you can use toggleClass

For the li elements don't use the same class you want to toggle. Instead you can use a data-class attribute with the same value.

 jQuery(document).ready( function(){

            jQuery('.descriptions li').on('mouseenter mouseleave', function (e) {
                var curClass = jQuery(this).attr("data-class"); 
                
                    jQuery("." + curClass).toggleClass("highlighted"); 
                
            });
    });
path, rect {
      fill: #BFBFBF;
    }
    .highlighted {
      fill: #F5902B;        
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="map-filter">
                    
    <ul class="filter descriptions">
        <li data-class="option_1"><a href="">Option_1</a></li>
        <li data-class="option_2"><a href="">Option_2</a></li>
        <li data-class="option_3"><a href="">Option_3</a></li>
        <li data-class="option_4"><a href="">Option_4</a></li>
        <li data-class="option_5"><a href="">Option_5</a></li>
    </ul>

</div>

<div class="map-wrapper">

<svg width="100%" height="100%" viewBox="0 0 800 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:2;">
    <g transform="matrix(0.416667,0,0,0.555556,0,0)">
        <g transform="matrix(2.39037,0,0,1.79883,-1266.71,-399.967)" >
            <path class="option_1 option_2 option_3" d="M870.662,271.437L819.238,271.437L819.477,286.53L688.87,286.53L688.918,236.997L639.821,236.997L639.821,428.754L709.828,428.754L709.828,438.128L870.748,438.128L870.662,271.437Z" />
        </g>
        <g transform="matrix(2.4551,0,0,1.79476,-1323.18,-398.465)">
            <rect class="option_2 option_3 option_4" x="872.947" y="315.892" width="33.705" height="122.356"  />
        </g>
        <g transform="matrix(2.33176,0,0,1.79476,-1127.2,-398.465)">
            <path  class="option_1" d="M877.229,365.035L877.229,315.892L872.947,315.892L872.947,438.249L912.059,438.249L912.059,365.035L877.229,365.035Z"  />
        </g>
        <g transform="matrix(2.34983,0,0,1.79476,-1126.18,-398.465)">
            <path class="option_5"   d="M906.652,315.892L872.947,315.892L872.947,363.007L906.652,363.007L906.652,447.615L935.25,447.615L935.25,353.568L913.058,353.568L913.058,335.671L936.997,335.671L936.997,327.961L906.652,327.961L906.652,315.892Z"  />
        </g>
   </g>
</svg>
</div>

Upvotes: 2

Related Questions