我的网站上有一个svg图像元素.我想在鼠标悬停时隐藏该图像并在mouSEOut上显示.
但是,我有一个奇怪的问题,图像在鼠标悬停时闪烁.
我尝试通过css和jquery隐藏图像.在这两种方法中我都遇到了同样的错误.
SVG
CSS
.imghideshow:hover
{
visibility:hidden;
}
请帮我恢复闪烁问题.我想要的是在悬停时隐藏图像并在mouSEOut上显示.
根据下面给出的答案编辑的场景.
很好地实现不透明度解决了闪烁问题.但是当我实现css属性时再现了另一个问题.
所以让我解释一下我的全部要求.
我有两个重叠的图像.(即,)父图像重叠的子图像.当我点击父图像时,它应该在js中触发一个函数.由于这里没有完全隐藏子图像,我无法点击父级的子重叠区域.检查这个小提琴.
预期产出是：
当我徘徊在孩子身上时,它应该隐藏,我应该能够触发父功能.
谢谢.
最佳答案
问题在于隐藏的可见性会干扰元素悬停.您只需要用另一种方法来隐藏它.例如
.imghideshow:hover
{
opacity: 0;
}
新解决方案
我想,没有更多的事情可以做.
另一个想法,可能取决于场景.上图没有鼠标交互.它是处理事件的较低图像,因此必须使另一个透明.
CSS：
#img2 {
pointer-events: none;
}
#img1 {
cursor:pointer;
}
#img1:hover ~ #img2 {
opacity: 0;
}
并且,如果这个不能做到这一点(这取决于布局,我不知道……),最后一个想法是：做你的第一个选项(隐藏可见性)然后放一个延迟徘徊3秒.唯一的问题是每3秒闪烁一次.
