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的父母，因此无法工作。因此，当选择父级时，它不会选择状态，因为.healine-overlay内没有元素.attachment-grid-feat。也没有必要在两者之间添加〜。右选择器如下：

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

这样，当父div [{1}}（您可能希望将标记设为div标记）悬停时，您就会定位子div .healine-overlay。

＆＃13;

.portfolio-reaction

＆＃13;

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

＆＃13;

顺便说一句，在此代码段中，.headline-overlay中包含三个元素。在悬停时，将显示所有三个元素。

Answer 2

首先，改变最后一个CSS行：

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

进入这个：

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

并且＆＃34;一半＆＃34;工作。您需要从较小的百分比更改width的{{1}}和height以匹配您的方形宽度和高度（将其保留为100％覆盖整个屏幕，因此，无论你在哪里移动光标，文字都不会消失。或者，如果您希望<div class="headline-overlay">元素自动匹配方形大小，则保持宽度和高度不变，只将其<div>更改为position:absolute，当然，稍微调整一下来自position:relative的位置。

这是一个工作小提琴：https://jsfiddle.net/yL231zsk/9/

使用css在另一个上面显示元素

2 个答案: