Question

当图像悬停在图像上时，我正试图在图像上显示一些文字。

这通常是一个简单的过程，但显然：如果第一个div（例如）悬停不起作用

first.div:hover second.div {

over（在我的情况下是一个图像）使用相对定位而不是绝对。

此页面中有很多图像，它们通过CSS设置为表格，其属性如display：table;所以我认为我没有选择切换到绝对定位。我知道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

我没有让你正确，你的问题是什么。如果您明确表示只有不透明度存在问题，那么您可以使用如下的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 2

你可以使用opacity来实现这一目标。确保您在悬停时定位图片。看看这个小提琴。

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

Answer 3

哇，在我花时间发布所有代码后30秒，我找到了解决方案。我用了

div.cell:hover #text {
opacity:1; }

一切正常。不知道我做错了什么，这是一个深夜，可能试图做一些像img.box:hover #text命令一样愚蠢的事情。无论如何，请忽略这个问题，谢谢

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

3 个答案: