CODEWITHSUNDEEP
javascriptjquerycsssvgmouseevent
Zicsus
Zicsus

Reputation: 1155

Jquery mouseenter and mouseleave not firing properly on svg

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!

Upvotes: 0

Views: 1031

Answers (2)

enxaneta
enxaneta

Reputation: 33072

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>

Upvotes: 1

Mark Carpenter Jr
Mark Carpenter Jr

Reputation: 842

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.

Upvotes: 0

Related Questions