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

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

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

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

SVG

CSS

.imghideshow:hover
{
    visibility:hidden;
}

http://jsfiddle.net/GMd8w/

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

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

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

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

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

http://jsfiddle.net/VwmEU/

预期产出是：

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

谢谢.

最佳答案

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

.imghideshow:hover
{
    opacity: 0;
}

updated fiddle

新解决方案

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

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

CSS：

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

updated fiddle

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

原文地址：https://www.jb51.cc/css/427457.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。