將鼠標懸停在div中的圖片

我沒有找到任何有關此主題的答案非常有用，所以我要再次問。我有一個IMG的一個div將鼠標懸停在div中的圖片

<div id ="gratterlendis"> <a href ="?page_id=8"><img src="img/gratterlendis.png" align="right" width="200"> </a></div>

裏面當我做

#gratterlendis img:hover { 
background:url("images/svarterlendis.png) 
}

沒有任何反應..即使我知道那張照片就裝但如果我把例如保證金左：10px的;裏面#gratterlendis img：懸停然後圖片電影10px左？

有什麼建議嗎？

來源

2012-03-26 user1279173

缺少報價？背景：URL（「圖像/ svarterlendis.png」）; – Hupperware 2012-03-26 23:18:51

你想改變圖像的src嗎？ img src將位於背景之上，因此您可能會將背景更改爲images/svarterlendis.png，但img/gratterlendis.png仍然會覆蓋其背景。爲什麼不完全擺脫標籤，並執行#gratterlendis a：懸停並將您的圖像作爲背景放在 – frumbert 2012-03-26 23:20:35

您使用的是舊版本的IE？他們只支持懸停元素（a） – Rifat 2012-03-26 23:37:05

或者您可以嘗試在A標記上添加CLASS屬性。

例：

*<div id ="gratterlendis"> <a class=swap href ="?page_id=8"><img src="img/gratterlendis.png" align="right" width="200"> </a></div>*

，然後添加你的CSS中的以下內容：

*a.swap { 
background-image:url(img/gratterlendis.png); 
} 
a.swap:hover { 
background-image:url(img/svarterlendis.png); 
}*

爲我工作......還我注意到您使用IMG和圖像文件夾...確保它們位於特定的文件夾中，或者正確重命名爲CSS來查找圖像。

希望它適合你。 anythiing別人來完成你的問題需要，您可以張貼在這裏... 感謝

來源

2012-03-26 23:33:37 Si8

你可以使用jQuery這樣

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#gratterlendis").mouseover(function() { 
      $("#my_image").attr("src", "images/svarterlendis.png"); 
     }); 
     $("#gratterlendis").mouseleave(function() { 
      $("#my_image").attr("src", "img/gratterlendis.png"); 
     }); 
    }); 
</script> 

<div id="gratterlendis"> 
     <a href="?page_id=8"> 
      <img src="img/gratterlendis.png" align="right" width="200" id="my_image"> 
     </a> 
    </div>

來源

2012-03-26 23:36:35

謝謝，所有有用答案=） – user1279173 2012-03-27 00:21:06

如果沒有上述工作的建議。 http://brassblogs.com/css/css-image-swap

來源

2012-03-26 23:37:16 dav

將鼠標懸停在div中的圖片

回答

相關問題