Hover over an image in div

Question

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 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; inside #gratterlendis img:hover then the picture movies 10px left ??

any suggestions ?

Answer 1

or you can try adding a CLASS Attribute on your A tag.

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:

*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.

Hope it works out for you. anythiing else needed to complete your question, you can post here... Thanks

Answer 2

you can use jquery like this

<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>

Answer 3

If none of the suggestions above works. http://brassblogs.com/css/css-image-swap