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/