如何爲圖片標籤製作懸停

我有幾張圖片可以作爲鏈接使用，我想給它們懸停效果，因此懸停時會彈出一個播放按鈕。要做到這一點，我做了一個課，並給出了懸停的背景圖片，但它不起作用。如何爲圖片標籤製作懸停

.img:hover { 
background:url(http://i40.tinypic.com/i3s4dc.png); 
}

這裏是我做了什麼：http://jsfiddle.net/nkEpd/

來源

2013-06-21 Alex Jj

這裏是更新了自己的小提琴按我下面的解決方案 - HTTP： //jsfiddle.net/nkEpd/30/ – lukeocom

試過了，沒有JS並沒有多餘的標記來解決這個問題。這是我的解決方案，在錨標籤中添加一個僞元素，這樣當它被徘徊時，僞元素背景就會出現。你只需要調整它的高度到你的「播放」按鈕的PNG高度，以便它得到適當的尺寸。

http://jsfiddle.net/gleezer/jmXdh/1/

的HTML保持不變，在你的小提琴，沒有多餘的元素，CSS的是，像這樣：

a{ 
position: relative; 
} 

a:hover:before { 
background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center; 
content:""; 
width: 100%; 
height: 100px; 
position: absolute; 
left: 0; 
}

來源

2013-06-21 02:19:07 Nobita

謝謝你，你的解決方案是最簡單的。 –

您可以將背景圖片不能添加到圖像的標籤，如因爲已經有是一個圖象重疊的背景將是無形的。

你想要做的是在你的圖像上添加第二個div，懸停時會顯示背景圖像。

的關鍵是添加HTML像這樣：

<a href="/"> 
    <div class="container"> 
     <img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" /> 
     <div class="overlay"></div>  
    </div>  
</a>

的CSS：

.container{ 
    position:relative; 
    width:184px; 
    height:104px; 
} 
.img{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 

.overlay{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:100; 
} 

.overlay:hover{ 
    background:url(http://i40.tinypic.com/i3s4dc.png); 
}

小提琴這裏：http://jsfiddle.net/nkEpd/13/

來源

2013-06-21 01:50:41 JanR

+1，但是我會指定懸停在舊版瀏覽器的錨點上得到更好的支持，所以僅處理錨點上的滾動可能是安全的做法（即：display：block ;'格式化的錨點） –

試試這個：

a{ 
display:block; 
    width:184px; 
    height: 104px; 


} 
a:hover { 
    background:url(http://h.hiphotos.baidu.com/album/w%3D310%3Bq%3D75/sign=4e5a4bd9b219ebc4c0787098b21dbec1/adaf2edda3cc7cd9ba7b40653801213fb80e9133.jpg); 
    background-size: 100%; 

} 

a:hover .img { 
    display: none; 
}

請查看demo。

來源

2013-06-21 01:55:03 Airen

您可以通過使用

img:hover{content:url("hoverimg.jpg");}

您的其他選項更改懸停圖像是有過像一條毯子，和背景圖像應用到它懸停。毯子需要完全定位以覆蓋底層圖像。

#blanket{position:absolute;top:0;bottom:0;left:0;right:0;} 
#blanket:hover{background-image:url('hoverimg.jpg');}

這裏是你的提琴的更新http://jsfiddle.net/nkEpd/30/

來源

2013-06-21 01:57:27 lukeocom

或許真的如THIS

簡單

<a href="/"> 
    <img src="http://i42.tinypic.com/2v9zuc1.jpg" 
    onmouseover="this.src='http://news.cnet.com/i/bto/20080112/small_car.jpg'"    
    onmouseout="this.src='http://i42.tinypic.com/2v9zuc1.jpg'"/> 
</a>

你唯一需要做的事情，它使用與播放按鈕相同的圖像作爲第二個圖像。

來源

2013-06-21 01:58:28 Brian

我有一個方法，以及：

http://jsfiddle.net/nkEpd/28/

HTML

<a href="/" class="gallerypic"> 
    <img src="http://i42.tinypic.com/2v9zuc1.jpg" class="pic" /> 
    <span class="zoom-icon"><img src="http://i40.tinypic.com/i3s4dc.png"></span> 
</a>

CSS

a.gallerypic{ 
    position:relative; 
    display:block; 
    float:left; 
} 

a.gallerypic span.zoom-icon{ 
    visibility:hidden; 
    position:absolute; 
    left:0%; 
    top:15%; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
} 

a.gallerypic:hover span.zoom-icon{ 
    visibility:visible; 
}

來源

2013-06-21 02:03:14 dnelson

如何爲圖片標籤製作懸停

回答

相關問題