將鼠標懸停在圖像上時更改div的背景圖像
[英]Change a div`s background image when hover over the image
問題描述
我有以下代碼：
<!DOCTYPE html> <html >
<head>
<style type="text/css">
.imgBox {background: url(lock75.png) no-repeat; }
.imgBox:hover {background: url(lock75light.png) no-repeat; }
</style>
</head>
<body>
<div style="width:200px; height:200px; border:1px solid;" class="imgBox"> </div>
</body>
</html>
我的圖像是75x75，問題是當我將鼠標懸停在邊框上時圖像會發生變化，我希望將鼠標懸停在圖像上以更改圖像。
注意：我需要一個與此類似的html結構。
編輯
我忘了提到我需要將圖片集中在其他div之上，而我沒有一定的空間用於圖片。
謝謝
2 個解決方案
解決方案1
1 2015-10-22 13:34:58
我想你正在尋找這個：
.container { border:1px solid #000; display:inline-block; height:200px; width:200px; } .imgBox { background:url(http://placehold.it/100x100) no-repeat; height:75px; width:75px; } .imgBox:hover { background:url(http://placehold.it/75x75) no-repeat; }
<div class="container"> <div class="imgBox"> </div> </div>
解決方案2
1 已采納 2015-10-22 13:45:57
你需要一個容器，它可以同時保存背景圖像和你的內容在下面的結構（我知道你要求的東西類似於你發布的東西，但它不可能;它確實是，但它將涉及CSS3元素和jQuery ）
這是設置
body { padding:10px; } .img-box { max-width:200px; width:100%; border:1px solid #ddd; } .img-box .img { width:200px; height:200px; background: url(https://unsplash.it/200/200/?image=876) no-repeat; border-bottom:1px solid #ddd; } .img-box .img:hover { background: url(https://unsplash.it/200/200/?image=876&blur) no-repeat; } p { margin:5px }
<div class="img-box"> <div class="img" ></div> <p>other content here</p> </div>
使用jQuery將鼠標懸停在div上時更改背景圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.