将鼠标悬停在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中的图片

回答

相关问题