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

Question

我的网站中有一个 svg 图像元素。我想在鼠标悬停时隐藏该图像并在鼠标悬停时显示。

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

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

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <image x="20" y="20" class="imghideshow" width="300" height="80"
     xlink:href="http://cdn1.iconfinder.com/data/icons/musthave/128/Help.png" />
</svg> 

CSS

.imghideshow:hover
{
    visibility:hidden;
}

http://jsfiddle.net/GMd8w/

请帮我解决闪烁问题。我想要的只是在悬停时隐藏图像并在鼠标悬停时显示。

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

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

所以让我解释一下我的全部要求。

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

http://jsfiddle.net/VwmEU/

预期输出是：

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

谢谢。

Answer 1

在您更新之后，我搬到了完全不同的地方以使其正常工作：

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> 

jQuery

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

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

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

查看更新后的fiddle。

Answer 2

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

.imghideshow:hover
{
    opacity: 0;
}

updated fiddle

新解决方案

我想，能做的已经不多了。

另一个想法，这可能取决于场景。上图没有鼠标交互。处理事件的是较低的图像，因此必须使另一个透明。

CSS：

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

updated fiddle

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