Question

我编写了以下jquery脚本。

<script type="text/javascript">
          $(document).ready(function(){
           $('#Oval-1').on('mouseover', function(e) {
                $("#Oval-1").fadeOut();
            });
                $('#Oval-1').on('mouseout', function(e) {
                         $("#Oval-1").fadeIn();
                 });
          });
        </script>

Oval-1是我页面上svg图像的id。在鼠标悬停时我希望图像淡出，在mouseout上我希望图像淡出。然而，像我一样这样做，图像会逐渐消失，但会立即消失，使其呈现“闪烁”状态一次。我在哪里错了？

这是我的div包含svg：

<div class="wrapper">
        <svg width="1024px" height="279px" viewBox="0 0 1024 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch -->
<title>map png</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="geschichte" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Desktop-Landscape" transform="translate(-145.000000, -332.000000)">
        <g id="map" transform="translate(107.000000, 246.000000)">
            <g id="mapback" transform="translate(38.000000, 86.000000)">
                <g id="map-png">


// there are further paths here, I took out for now

                                            <ellipse id="Oval-1" fill="#0B619B" opacity="0.141849347" cx="929.5" cy="94.5" rx="94.5" ry="94.5"></ellipse>


                </g>
            </g>
        </g>
    </g>
</g>

PS：我找到了this，但我关注的是jquery，而不是vanilla js。

Answer 1

您可以使用CSS

轻松实现这一点

#Oval-1 {
  opacity: 1;
  transition: opacity 400ms ease;
}

#Oval-1:hover {
  opacity: 0;
}

Answer 2

这里的问题是，#Oval-1元素正在从页面中删除，从而触发mouseout事件。

包装动画元素，并像这样监听父级上的事件：

<div id="Oval-1">
    <div id="test">hello</div>
</div>

 $(document).ready(function(){
       $('#Oval-1').mouseover(function() {
            $("#test").fadeOut();
        });
        $('#Oval-1').mouseleave(function() {
            $("#test").fadeIn();
        });
  });

似乎很好用。

编辑：只需检查删除子元素是否导致父元素崩溃，可能还会触发鼠标左移。

添加了这些CSS规则：

#test {
    position: absolute;
}

#Oval-1 {

    background: pink;
    width: 300px;
    height: 300px;
}

更好地说明你是否使用小提琴或类似的东西。

可替换地，

#Oval-1 {
    transition: all 0.5s ease-in-out;
}
#Oval-1:hover {
    opacity: 0;
}

可能有效

隐藏和显示图像onMouseOver＆amp; onMouseOut - 图像立即重新出现

2 个答案: