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

我的网站上有一个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/

预期产出是：

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

谢谢.

.imghideshow:hover
{
    opacity: 0;
}

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