使用 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 扩展到 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 的父级。所以它不会 select 父级被 selected 时的状态，因为 .attachment-grid-feat 中没有元素 .healine-overlay。也不需要在两者之间添加 ~ 。右边的select或者是下面的:

.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 中包含三个元素。悬停时，将显示所有三个元素。

Answer 2

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

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

进入这个：

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

并且会 "half" 工作。之后您需要将 <div class="headline-overlay"> 的 width 和 height 从较小的百分比更改为匹配您的正方形宽度和高度（将其保留为 100% 覆盖整个屏幕，结果，无论您将光标移动到哪里，文本都不会消失）。或者，如果您希望 <div> 元素自动匹配正方形大小，则保持宽度和高度不变，仅将他的 position:absolute 更改为 position:relative 当然，稍微调整一下他的来自 top.

的位置

这是一个有效的 fiddle：https://jsfiddle.net/yL231zsk/9/

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

Show element on hover another using css

html

css

hover