ansaurus

Question

how to change div background image in mouse over ?

Answer 1

+2 A:

You mean something like following?

$('.smenu li').bind('mouseover', function(){
  $('.hbg').css('background-image', 'new image');
});

azatoth 2010-06-21 17:05:18

Answer 2

+2 A:

use hover function of jquery

for example:

 $('.menuItem').hover( function(){ 
      $(this).css('background-image', 'image url'); 
   } );

Pranay Rana 2010-06-21 17:05:55

Answer 3

+2 A:

I assume you intend to use the src of the image under the li.

$('.smenu li').mouseover( function(){
    var src = $(this).find('img').attr('src');
    $('.hbg').css('background-image', 'url(' + src + ')');
});

patrick dw 2010-06-21 17:07:50

Answer 4

+1 A:

I managed the following:

<!DOCTYPE html> 
<title>UL class change on li hover</title> 

<style> 
#list {
background-color:#dda;
width:10em;
height:20em;
}

#list li {
padding:2em .5em;
}
</style>  

<ul id="list">
<li class="one">Test 1</li>
<li class="two">Test 2</li>
<li class="three">Test 3</li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt; 

<script>
$(document).ready(function () {
    var defaultColor = $("#list").css("background-color");

    $("#list .one").hover(
        function () { 
            $(this).parent().css({backgroundColor: "red"});
        },
        function () { 
            $(this).parent().css({backgroundColor: defaultColor});
        }
    );

    $("#list .two").hover(
        function () { 
            $(this).parent().css({backgroundColor: "green"});
        },
        function () { 
            $(this).parent().css({backgroundColor: defaultColor});
        }
    );

    $("#list .three").hover(
        function () { 
            $(this).parent().css({backgroundColor: "blue"});
        },
        function () { 
            $(this).parent().css({backgroundColor: defaultColor});
        }
    );
});
</script>

It would be nice to refactor this, but just replace the "color" with "image", and it should be a working solution.

d8uv 2010-06-21 18:38:22

ansaurus

tags:

views:

answers:

how to change div background image in mouse over ?

related questions