html - 使用css在另一个悬停时显示元素

Question

我正在研究一个基于 A 元素悬停的微型 css Action ，它将显示另一个元素。代码非常基本:

<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 扩展到 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>

感谢您提供任何提示和建议。

Answer 1

您在 css 文件中编写了以下内容:

.attachment-grid-feat:hover ~ .headline-overlay {
    display:block;
}

自 .attachment-grid-feat 起将无法正常工作不是 .headline-overlay 的父级.所以它不会选择父级被选中时的状态，因为没有元素 .healine-overlay里面.attachment-grid-feat .也不需要添加 ~两者之间。正确的选择器如下:

.portfolio-reaction:hover .headline-overlay {
    display: block;
}

这样你就可以定位子 div .healine-overlay当父 div .portfolio-reaction (您可能希望将 <a> 标记设为 <div> 标记)悬停。

.portfolio-reaction {
  width: 250px;
  height: 250px;
  display: block;
}

.headline-overlay {
  background: none;
  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;
}

.portfolio-reaction:hover .headline-overlay {
  display: block;
}

<div title="#" class="portfolio-reaction" href="#">
  <img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
  <div class="headline-overlay">
    <div id="element-1">Hello 1</div>
    <div id="element-2">Hello 2</div>
    <div id="element-3">Hello 3</div>
  </div>
</div>

在这段代码中，.headline-overlay 中包含三个元素.悬停时，将显示所有三个元素。