使用CSS在悬停另一个元素时展示元素

Question

我正在处理一个基于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>

感谢您提供的任何技巧和建议。

- Paweł Skaba

---

如果我理解正确，您希望在悬停时同时显示三个元素（element-1、element-2、element-3）？ - Ivan

确切地说 - 这就是我想要实现的。 - Paweł Skaba

Answer 1

您在CSS文件中编写了以下内容：

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

由于.attachment-grid-feat不是.headline-overlay的父级，因此它无法选择当父级被选择时的状态，因为在.attachment-grid-feat内没有元素.healine-overlay。同时，在两者之间无需添加~。正确的选择器如下：

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

当鼠标悬停在父级div元素.portfolio-reaction上时，您正在针对其子div元素.healine-overlay进行操作（您可能需要将<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中。悬停时，所有三个元素都会显示出来。

- Ivan

Answer 2

首先，将最后一行CSS更改为：

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

把它转换成这样：

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

并且会“半”工作。接下来，您需要将<div class="headline-overlay">的width和height从较小的百分比更改为与您的正方形宽度和高度匹配（将其保留为100％会覆盖整个屏幕，因此无论您将光标移动到哪里，文本都不会消失）。或者，如果您想让您的<div>元素自动匹配正方形大小，则保留宽度和高度不变，仅将其position:absolute更改为position:relative，并且当然要稍微调整其位置top。

这里是一个正在工作的示例：https://jsfiddle.net/yL231zsk/9/

- EddNewGate