如何在懸停div時影響圖像的不透明度？

我非常接近實現我想要的東西...但是我想知道是否已經達到了可能與CSS的限制。如何在懸停div時影響圖像的不透明度？

如果您導航到http://host17.qnop.net/~gjcwebde/ecocamel/index.php?option=com_content&view=article&id=28&Itemid=49

我們有一個產品滑塊。我試圖得到它..

1）產品開始在100％不透明負載。 2）將鼠標懸停在一個產品上，並且你正在盤旋的那個保持在100％不透明度，其他人都會說0.5不透明度（暗淡）。

我已經幾乎用css實現了這一點。喲可以看到它的工作，除非當你將鼠標懸停在彈出的描述上時...活動圖像返回到0.5不透明度。是否可以控制此圖像的不透明度，同時將鼠標懸停在彈出的描述上？我真的很希望如此！如果沒有...我怎麼能用js來實現這個呢？看着這裏的一些，但沒有一個真正適用於我的情況。希望我已經提供了足夠的信息供你理解。乾杯!

來源

2012-08-13 Oliver Gibson

您可能將鼠標懸停在圖像上，而不是包含圖像和彈出式說明的容器。 – 2012-08-13 12:49:06

我拿起你的HTML，並把IMG它在小提琴中。看看http://jsfiddle.net/hMW8N/

無論如何，這是你基本需要的一切。我已經完成了對這些選擇器的指定，但我正在做，所以你可以更好地理解。

#slider-list-stick-1:hover .slide-index{ 
    opacity: 0.5; 
    filter:alpha(opacity=50); //ie 
} 

#slider-list-stick-1 .slide-index:hover { 
    opacity: 1; 
    filter:alpha(opacity=100); //ie 
}

來源

2012-08-13 13:00:15 banzomaikaka

是的是的！這是一個！謝謝你隊友，你不知道我一直在努力多久:)我會看看這是如何工作..我有大約12行的css之前得到類似的結果:)）Excellt。謝謝。 .slide-index從哪裏來的？從來沒有嘗試過，在我的試驗和錯誤會話 – 2012-08-13 13:01:58

;）沒問題，很高興我幫助！ – banzomaikaka 2012-08-13 13:03:33

這應該適用於圖像不透明的情況，當用戶沒有懸停時。

divName img { 
opacity:0.3; 
filter:alpha(opacity=30);(IE) 
}

然後當他們徘徊（這應該包括你的產品信息造型爲你徘徊時顯示。）

diveName img:hover{ 
opacity:1.0; 
filter:alpha(opacity=100);(IE) 
}

也扔在一個主動類的開始，這樣至少一個產品被示出當頁面加載

例如：

divName img .activeLoad{ 
opacity:1.0; 
filter:alpha(opacity=100);(IE) 
}

來源

2012-08-13 12:44:23 ryanSrich

#containingDiv:hover img { }會影響當任何包含div的懸停，所以我會用，如果我是你，瑞安的解決方案只會影響到IMG如果你盤旋在它

來源

2012-08-13 12:53:20 Andy

嗨，感謝您的投入。我嘗試瞭解決方案1，但它沒有奏效。我認爲這是因爲我有一些奇怪的html設置，它不像幾個div和幾張圖像那麼簡單。如果任何人都可以看看螢火蟲或其他東西，並讓我知道確切的代碼...我已經嘗試了很多，我現在都迷失了。我不知道這是否是我可憐的css，或者如果它不可能.. 它是完美的....當你把鼠標懸停在彈出式描述.....當產品圖像變暗時，當它需要停留在1.0不透明度..我希望你明白。 – 2012-08-13 12:59:38

JOPLO回答時，剛剛爲你排序，這只是一個改變div ID/class名稱的問題。好吧，很高興你把它分類:) – Andy 2012-08-13 13:08:25

添加到您的樣式這個聲明

.slide-index:hover img{ 
    opacity: 1; 
}

至於其他div s的也在slide-index的集裝箱 - hover效果仍然適用。

來源

2012-08-13 13:00:37 skip405

謝謝，另一個好的答案:) – 2012-08-13 13:05:45

如何在懸停div時影響圖像的不透明度？

回答

相關問題