CSS悬停效果只适用于绝对定位？

Question

我试图做一些文字上出现的图像时图像上空盘旋。

这通常是一个简单的过程，但显然：如果第一个div（例如）

first.div:hover second.div {

以上（在我的情况下的图像）的使用相对定位，而不是悬停不起作用绝对。

有大量的图片在这个网页，让他们被设置为通过CSS使用属性，如显示表：表;所以我不认为我可以选择切换到绝对定位。我知道CSS表格通常不被宽恕，但我绝对必须这样做。

现在我使用的透明度的变化，试图使文本显示。我一直在使用的z-index也试过，但我认为问题在于：悬停效果不与绝对定位很好地工作。哪些解决方法（如果有的话）可用？

我不反对使用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 ...

Answer 1

哇，从字面上看30秒后我找到了解决办法。我用div.cell:hover #text { opacity:1; } 和一切工作。不知道我在做什么错了，它是一个深夜，也许尝试做了愚蠢的事情像img.box:hover #text命令。无论如何无视这个问题的家伙，并且谢谢

Answer 2

我不明白你的问题。如果你清楚你只有不透明的问题，那么你可以使用下面的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; } 

如果它不适合你，那么请分享你的代码或活链接，然后解释你是否正确。

Answer 3

您可以使用opacity来实现此目的。确保你瞄准悬停的照片。看看这个小提琴。我花了时间后我所有的代码

http://jsfiddle.net/Davidicus/69ZTN/