Jquery SVG图像元素在鼠标悬停时闪烁

我的站点中有一个svg图像元素。我想在mouseover上隐藏该图像并在mouseout上显示

但是，我有一个奇怪的问题，鼠标上方的图像会闪烁。

我试图通过css和jquery隐藏图像。在这两种方法中，我都遇到了相同的错误

SVG

请帮助我恢复闪烁问题。我所要做的就是在鼠标悬停时隐藏图像，并在鼠标外显示

根据下面给出的答案编辑情景。

很好地解决了闪烁问题。但是，当我实现css属性时，又出现了另一个问题

让我解释一下我的全部要求

我有两个重叠的图像。（即）子图像重叠在父图像上。当我点击父映像时，它会触发js中的一个函数。由于子图像在这里并没有完全隐藏，我无法单击父图像的子重叠区域。检查这把小提琴

预期产出为：

当我将鼠标悬停在child上时，它应该隐藏起来，并且我应该能够触发父函数

---

谢谢。

在您的更新之后，我换了一种完全不同的方式让它工作：

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg">
    <g class="first">
      <!-- Both images here -->
      <rect x="25px" y="25px" width="150" height="100" class="green" />
      <rect x="50px" y="50px" width="150" height="100"/>
    </g>
    <g class="hover">
       <!-- The hover state -->
        <rect x="25px" y="25px" width="150" height="100" class="green" id="click" />
    </g>
</svg> 

---

请参阅更新的。

问题在于隐藏的可见性会干扰元素悬停。你所需要的只是用另一种方式来隐藏它。比如说

.imghideshow:hover
{
    opacity: 0;
}

新解决方案

我想没有更多的事情可以做了

另一个想法，这可能会根据情况而起作用。上面的图像没有鼠标交互。处理事件的是较低的图像，因此必须使另一个图像透明

CSS:

---

而且，如果这一个不能做到这一点（这取决于布局，我不知道…），还有最后一个想法：做你的第一个选项（隐藏可见性），然后在悬停中延迟3秒。唯一的问题是每3秒钟出现一次小的闪烁。

这就解决了闪烁问题。但当我实施你的解决方案时，又出现了另一个问题。我有两个重叠的图像。（即）子图像重叠在父图像上。当我点击父映像时，它会触发js中的一个函数。由于子图像在这里并没有完全隐藏，我无法单击父图像的子重叠区域。检查这把小提琴。我不认为有一个简单的解决办法。z-index不适用于svg。您可以将指针事件设置为“无”，但这会重现第一个问题（因为指针事件也用于触发：hover）。我能想到的唯一解决办法就是在child@vals-问题是，父对象上重叠的子对象可能是附近某个其他父对象的子对象：（.+1！你刚刚帮我节省了数小时的工作，傻瓜IE！我只想在鼠标悬停在图像上时隐藏图像。我一悬停在svg上，你的小提琴就会隐藏图像。这就是为什么我告诉你使用容器。如果你使用与图像大小和位置相同的圆，它应该可以正常工作。谢谢，请检查我更新的问题这说明了完整的场景。更新了处理此问题的新方法：）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg">
    <g class="first">
      <!-- Both images here -->
      <rect x="25px" y="25px" width="150" height="100" class="green" />
      <rect x="50px" y="50px" width="150" height="100"/>
    </g>
    <g class="hover">
       <!-- The hover state -->
        <rect x="25px" y="25px" width="150" height="100" class="green" id="click" />
    </g>
</svg> 

$('.first').mouseenter(function() {
    $(this).hide();
    $('.hover').show();
});

$('.hover').mouseleave(function() {
   $(this).hide();
    $('.first').show();
});

$('#click').click(function() {
   alert('clicked'); 
});

.imghideshow:hover
{
    opacity: 0;
}

#img2 {
    pointer-events: none;
}
#img1 {
    cursor:pointer;
}
#img1:hover ~ #img2 {
    opacity: 0;
}