我正在尝试在悬停时使图像半透明,并在其上显示文本。
我已经实现了一个纯 CSS 解决方案,但它存在一个问题:当我悬停图像时,会显示文本(链接),但如果我将鼠标悬停在此链接上,它会失去图像上的悬停,并且开始闪烁,因为它陷入了悬停循环,“取消悬停”。
一个例子会更加明确,所以这是我的代码:http: //jsfiddle.net/zm2Jt/3/
CSS部分:
.fadeImg {
opacity: 1;
}
.fadeImg~.hoverDisplay {
display: none;
}
.fadeImg:hover {
opacity: 0.5;
}
.fadeImg:hover~.hoverDisplay {
display: block;
}
使用绝对位置将文本放置在图像上。由于链接是 .hoverDisplay 的子节点,它是绝对定位的跨度,我想我不能用 CSS 做太多事情来防止悬停在链接上。
我知道我可以添加 JS 来解决问题(当我输入图像时添加一个类,当我离开它时删除它),但我宁愿使用 CSS,尽管我怀疑这是不可能的。
感谢您的回答:-)