如何實現像這樣的懸停效果

我試圖在stackover flow中搜索這種效果，但我不知道開發人員稱這種懸停效果也不知道如何實現它。如何實現像這樣的懸停效果

Here is the image with hover and non hover effect:

是可以做到這一點使用CSS，如果沒有我可以使用jQuery的解決方案？

謝謝。

2013-05-01 Rahul Dev

只需添加一個名爲「主動」上懸停類（或「懸停」？）和CSS，更改按鈕部分的背景顏色（ Quam Semper ..）改爲紅色，並顯示你的覆蓋圖（這是一個半透明背景，中間有一個加號的png，以及絕對定位，以確保它位於頂部和覆蓋範圍內） – h2ooooooo 2013-05-01 07:22:09

是的，非常感謝 – 2013-05-01 07:37:39

你會想要做這樣的事情

<style type="text/css"> 
.thumb {position:relative;width:200px;height:20px;} 
.thumb:hover .overlay {opacity:0.5;} 
.overlay {position:absolute;top:0;left:0;width:200px;height:20px;background:#fff;opacity:0;} 
</style> 

<div class="thumb"> 
    <div class="overlay"></div> 
    <img src="image.gif" /> 
</div>

來源

2013-05-01 07:26:53 brendosthoughts

工作!!非常感謝 – 2013-05-01 07:37:14

沒問題......如果你滿意的話，你應該將回答標爲已接受......你需要的任何東西讓我知道 – brendosthoughts 2013-05-01 07:38:48

如何實現像這樣的懸停效果

回答

相關問題