[英]Hover over an image in div
I dont find any answers related to this topic very usefull so i am going to ask again. 我没有找到与该主题相关的任何答案,因此我将再次询问。 I have an img inside a div
我在div中有一个img
<div id ="gratterlendis"> <a href ="?page_id=8"><img src="img/gratterlendis.png" align="right" width="200"> </a></div>
And when i do 当我这样做
#gratterlendis img:hover {
background:url("images/svarterlendis.png)
}
nothing happens .. even though i know that picture had loaded but if i put for example margin-left:10px; 什么也没有发生..即使我知道该图片已加载,但是如果我放例如margin-left:10px; inside #gratterlendis img:hover then the picture movies 10px left ??
在#gratterlendis img里面:悬停,然后将图片电影左移10px?
any suggestions ? 有什么建议么 ?
or you can try adding a CLASS Attribute on your A tag. 或者您可以尝试在A标签上添加CLASS属性。
Example : 范例 :
*<div id ="gratterlendis"> <a class=swap href ="?page_id=8"><img src="img/gratterlendis.png" align="right" width="200"> </a></div>*
and then adding the following inside your CSS: 然后在CSS内添加以下内容:
*a.swap {
background-image:url(img/gratterlendis.png);
}
a.swap:hover {
background-image:url(img/svarterlendis.png);
}*
That worked for me... also i noticed you used IMG and IMAGES folder... make sure they are on that specific folder or rename it properly for the CSS to find the image. 这对我有用...我还注意到您使用了IMG和IMAGES文件夹...确保它们在该特定文件夹上,或者正确地重命名以供CSS查找图像。
Hope it works out for you. 希望可以帮助你。 anythiing else needed to complete your question, you can post here... Thanks
完成您的问题所需的其他任何方法,您都可以在此处发布...谢谢
you can use jquery like this 你可以像这样使用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>
If none of the suggestions above works. 如果上述建议均无效。 http://brassblogs.com/css/css-image-swap
http://brassblogs.com/css/css-image-swap
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.