当鼠标悬停在图像上时，我试图让一些文本出现在图像上。
这通常是一个简单的过程，但显然 :hover 在第一个 div 时不起作用(例如)
first.div:hover second.div {
over(在我的例子中是图像)使用相对定位而不是绝对定位。
这个页面有很多图片，通过CSS设置成表格，属性有display:table;所以我不认为我可以选择切换到绝对定位。我知道 CSS 表格通常不受宽恕，但我绝对必须这样做。
现在我正在使用不透明度更改来尝试使文本出现。我也尝试过使用 z-index，但我认为问题在于 :hover 效果在绝对定位时效果不佳。有哪些解决方法(如果有)可用？
我不反对使用 HTML/CSS 以外的语言，但我没有经验而且我不理解它们，所以我更喜欢 CSS 解决这个问题，但乞丐不是选择者。
根据要求，这里有一些代码:
HTML
<div class="cell"><img class="box" src="image1.jpg"><div id="text">Text text text</div></div>
CSS
.cell {
position:relative;
display:table-cell;
background-color:black;
width:700px;
height:auto;
}
#text {
display:table;
position:absolute;
z-index:999;
color:#fff;
text-align:center;
width:100%;
top:48%;
left:0;
}
img {
max-height:600px;
max-width:600px;
height:auto;
width:100%;
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
opacity:0.4;
z-index:2;
}
img:hover {
filter: none;
-webkit-filter: grayscale(0);
opacity:1.0;
}
我不确定是什么原因造成的，所以我包含了很多不必要的东西......我对编码有点陌生所以对我来说放轻松，但我无法获得 cell.div:hover #text { opacity:1;}上类。我在某处读到这是因为悬停效果不适用于相对定位的 div...
最佳答案
我没有让你明白，你的问题是什么。如果你清楚你只有不透明度有问题，那么你可以使用如下的 css。
first.div:hover second.div {
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: alpha(opacity=75);
-khtml-opacity: 0.75;
-moz-opacity: 0.75;
opacity: 0.75; }
如果它不适合你，那么请分享你的代码或实时链接，然后适本地解释你。
关于html - CSS 悬停效果只适用于绝对定位？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21018078/