悬停在CSS不透明兄弟子元素中
悬停在CSS不透明兄弟子元素中
提问于 2013-08-13 18:29:27
我试图在悬停时使图像半透明，并在其上显示文本。
我已经实现了一个纯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，尽管我怀疑这是不可能的。
谢谢你的回答:-)
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-08-13 18:36:48
在很大程度上削减你的CSS怎么样？
Demo 2 (盒子里的a标签，你可以随意调整)
.formContainer .teamImg {
float: left;
margin-left: 20px;
position: relative;
width: 300px;
}
.teamImg span {
opacity: 0;
height: 100%;
width: 100%;
position: absolute;
background: rgba(255,255,255,.5);
top: 0;
left: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.teamImg:hover span {
opacity: 1;
}我只是将span标记absolute定位到容器元素，也是在这里转换不透明度，但也使用rgba()使元素背景稍微不透明。
白手起家，简化了想法
<div>
<img src="URL_HERE" />
<span>Write anything here</span>
</div>
div {
float: left;
border: 1px solid #aaa;
position: relative;
}
div span {
position: absolute;
height: 100%;
width: 100%;
background: rgba(255,255,255,.5);
top: 0;
left: 0;
opacity: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
div:hover span {
opacity: 1;
}Stack Overflow用户
发布于 2013-08-13 18:37:23
在文本中添加pointer-events: none;。
这样，它不应该影响你的悬停。
有关指针事件的更多信息：
Stack Overflow用户
发布于 2013-08-13 19:01:31
对悬停状态稍加调整：http://jsfiddle.net/zm2Jt/8/
.fadeImg:hover, .teamImg:hover .fadeImg {
opacity: 0.5;
}
.fadeImg:hover~.hoverDisplay, .teamImg:hover .hoverDisplay {
display: block;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18216520
复制相关文章
相似问题
腾讯云开发者
