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>

Answer 2

您是否尝试过将.mouseenter() 与.mouseover() 和.mouseleave() 与.mouseout() 交换？

根据个人经验，我在表格上突出显示行时遇到了类似的问题。不是 100% 了解我为什么或如何知道替代品效果更好。

这个SOF Question 有一些关于事件之间差异的好信息。

---

更新了您的小提琴https://jsfiddle.net/msk6L18o/ 并删除了e.stopPropagation(); 突出显示变得更加流畅，您的问题看起来已经得到解决。如果鼠标在事件完成之前迅速离开元素，e.stopPropagation(); 会阻止离开/退出事件触发。如果您需要使用e.stopPropagation();，您可以将其移至添加/删除类函数下方，以防止事件在这些函数运行之前停止。