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

Question

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

但是,我有一个奇怪的问题,图像在鼠标悬停时闪烁.

我尝试通过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/

请帮我恢复闪烁问题.我想要的是在悬停时隐藏图像并在mouseout上显示.

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

很好地实现不透明度解决了闪烁问题.但是当我实现css属性时再现了另一个问题.

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

我有两个重叠的图像.(即)父图像重叠的子图像.当我点击父图像时,它应该在js中触发一个函数.由于这里没有完全隐藏子图像,我无法点击父级的子重叠区域.检查这个小提琴.

http://jsfiddle.net/VwmEU/

预期产出是:

当我徘徊在孩子身上时,它应该隐藏,我应该能够触发父功能.

谢谢.

Answer 1

问题在于隐藏的可见性会干扰元素悬停.您只需要用另一种方法来隐藏它.例如

.imghideshow:hover
{
    opacity: 0;
}

更新小提琴

新解决方案

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

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

CSS:

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

更新小提琴

并且,如果这个不能做到这一点(这取决于布局,我不知道......),最后一个想法是:做你的第一个选项(隐藏可见性)然后放一个延迟徘徊3秒.唯一的问题是每3秒闪烁一次.