javascript - Jquery mouseenter 和 mouseleave 无法在 svg 上正确触发

Question

我想在悬停时用轮廓突出显示元素。

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");
});

这适用于除 svg 之外的所有元素。 mouseenter 似乎在轮廓可见时触发，但 mouseleave 不触发且轮廓永远不会消失。

JS FIDDLE HERE

注意 - 我不想使用 css :hover，因为它不适合我的用例。

谢谢!

Answer 1

正如我评论过的:在 SVG 中，您可能想尝试使用 stroke 而不是轮廓。

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