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

Question

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

jquerycsssvg

6

我在网站上有一个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中的一个函数。由于子图像在这里没有完全隐藏，我无法单击父级的重叠区域。请查看此fiddle。

http://jsfiddle.net/VwmEU/

期望的输出结果是：

当我悬停在子元素上时，它应该隐藏，然后我应该能够触发父级函数。

谢谢。

- Monie corleone

2个回答

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。

- soyuka

我想要在鼠标悬停在图片上时隐藏图片。您的小样例会在我将鼠标悬停在 SVG 上时立即隐藏图片。 - Monie corleone

这就是为什么我告诉你要使用容器。如果你使用一个与你的图像大小和位置相同的圆形，它应该可以正常工作。 - soyuka

谢谢，请检查我的更新问题，其中详细说明了整个情境。 - Monie corleone

已更新为一种新的处理方式 :) - soyuka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vals · Accepted Answer

问题只是visibility:hidden影响了元素的悬停效果。你需要使用另一种方法来隐藏它。例如：

.imghideshow:hover
{
    opacity: 0;
}

更新后的代码演示

新方案

我认为已经没有太多可以做的了。

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

CSS：

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

更新的Fiddle

如果这个方法行不通（需要考虑布局，我不确定……），那么还有一个最后的想法：使用你最初想到的方式（visibility hidden），但是在鼠标移开时加入3秒的延迟。唯一的问题是每3秒钟会闪烁一次。