使用css悬停另一个元素时显示元素答案

【问题标题】：Show element on hover another using css使用css悬停另一个元素时显示元素
【发布时间】：2016-07-19 20:07:46
【问题描述】：

我正在开发一个基于 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 扩展到 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>

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

【问题讨论】：

如果我理解正确，您希望三个元素（element-1、element-2、element-3）同时出现在悬停上？
正是——这就是我想要实现的目标。

标签： html css hover

【解决方案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（您可能希望将 <a> 标签设为 <div> 标签）悬停时，您将定位子 div .healine-overlay。

.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>

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

【讨论】：

【解决方案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/

【讨论】：