Jquery mouseenter and mouseleave not firing properly on svg

Question

I want to highlight elements with a outline when hovered.

Css -

.hovercss-element-hover {
    outline-style: solid !important;
    outline-color: red !important;
    outline-width: 1px !important;
    outline-offset: 0 !important;
    outline: 1px solid red !important;
}

Javascript -

$("body").find("*").mouseenter(function(e)
{
    e.stopPropagation();
    $(this).addClass("hovercss-element-hover");
});

$("body").find("*").mouseleave(function(e)
{
    e.stopPropagation();
    $(this).removeClass("hovercss-element-hover");
});

This works fine on all the elements except svg. mouseenter seems to fire as outline is visible but mouseleave does not fire and outline never goes away.

JS FIDDLE HERE

Note- I don't want to use css :hover as it does not fit my use case.

Thanks!

Do you have a sample of your SVG in the HTML? Also, it would make far more sense and perform a lot better to make the hover effect work in CSS alone; JS is not the best solution for this. — Rory McCrossan, Aug 01 '19 at 19:03
@RoryMcCrossan here is the code - https://jsfiddle.net/zicsus/k7t5d4rL/8/ . I have to perform operation when elements are hovered and :hover will have propagation to parents and will end up outlining whole page. — Zicsus, Aug 01 '19 at 19:25

score 1 · Answer 1 · answered Aug 01 '19 at 19:41

As I've commented: In SVG you mat want to try stroke instead of outline.

// find elements
$("*").mouseenter(function(e)
{
 e.stopPropagation();
  $(this).addClass("hovercss-element-hover");
});

$("*").mouseleave(function(e)
{
 e.stopPropagation();
  $(this).removeClass("hovercss-element-hover");
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
/*
.hovercss-element-hover {
 outline-style: solid !important;
 outline-color: red !important;
 outline-width: 1px !important;
 outline-offset: 0 !important;
 outline: 1px solid red !important;
}*/

.svg-inline--fa.fa-w-16 {
    width: 10em;
    border:1px solid;
}

path.hovercss-element-hover{stroke:red; stroke-width:10}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <svg class="svg-inline--fa fa-download fa-w-16" data-prefix="fas" data-icon="download" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
  <path fill="white" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path>
  </svg>
</div>

Mark Carpenter Jr · Answer 2 · 2019-08-01T19:37:05.687

0

Have you tried swapping .mouseenter() with .mouseover() and .mouseleave() with .mouseout()?

From personal experience, I have had similar trouble with row highlighting on tables. Not 100% on the why or how I just know the alternates work better.

This SOF Question has some good information on the difference between the events.

Updated your fiddle https://jsfiddle.net/msk6L18o/ and dropped e.stopPropagation(); highlighting becomes much smoother and your issue looks to be fixed. e.stopPropagation(); was preventing the leave/out events from firing if the mouse rapidly left the element before the event could complete. If you're required to use e.stopPropagation(); you could move it below the add/remove class functions to prevent the event from stopping before those functions ran.

edited Aug 01 '19 at 19:37

answered Aug 01 '19 at 19:12

Mark Carpenter Jr

812
1
16
32

adding e.stopPropagation(); below is still giving me same issue. – Zicsus Aug 02 '19 at 04:39
I tried removing e.stopPropagation() in main code but it's not working. – Zicsus Aug 02 '19 at 04:53
Tested the above fiddle in fire fox and chrome, and updated this (https://jsfiddle.net/ymw5ev8h/) fiddle to use the svg selector with stop prop and I'm not seeing the sticky border issue you were describing. Maybe you have another issue? – Mark Carpenter Jr Aug 02 '19 at 12:43

Jquery mouseenter and mouseleave not firing properly on svg

2 Answers2