Question

我的网站中有一个svg图像元素。我想在mouseover上隐藏该图像并在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;
}

updated fiddle

新解决方案

我认为没有更多的事情可以做。

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

CSS：

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

updated fiddle

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

Answer 2

更新后，我转而采用完全不同的方式使其有效：

<强> 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。

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

2 个答案:

updated fiddle