我正在处理一个基于A元素悬停的小型CSS操作,将显示另一个元素。 代码非常基本:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">LOREM IPSUM</div>
</a>
.portfolio-reaction {
width:250px;
height:250px;
display:block;
}
.headline-overlay {
background:none;
height:100%;
width:100%;
display:none;
position:absolute;
top:10%;
z-index:999;
text-align:left;
padding-left:0.5em;
font-weight:bold;
font-size:1.3em;
color:#000;
}
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
以及 jsfiddle:https://jsfiddle.net/yL231zsk/1/
这个解决方案在99%的情况下都是有效的。缺失的1%是效果 - 当鼠标箭头穿过按钮时,文本会闪烁。我不知道为什么会这样。其次 - 如果我想将出现元素的数量从1个扩展到3个,该怎么办?所以要有:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<p class="element-1">abc</p>
<p class="element-2">111</p>
<div class="element-3">X</div>
</div>
</a>
感谢您提供的任何技巧和建议。