javascript - how to change div background image in mouse over? - Stack Overflow

admin管理员组

文章数量:1396130

I have 7 thumbnail image menus.when user points(mouseover) to a particular thumbnail, I want to change the background-image of <div> to the regarding image of that thumbnail.

thumbnail images menu are in a diff div

I have 7 thumbnail image menus.when user points(mouseover) to a particular thumbnail, I want to change the background-image of <div> to the regarding image of that thumbnail.

thumbnail images menu are in a diff div

• javascript
• jquery
• mouseover
• onmouseover

Share Improve this question Follow asked Jun 21, 2010 at 12:56 nectarnectar 9,6773636 gold badges8282 silver badges101101 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Whats wrong with pure css?

div.thumbnail:hover {
 background-image: url(image/in/question);
}

Simply change the div.thumbnail to reflect your div and class or id name (in case of id replace .with #)

You can use jQuery something like:

$(function(){
  $('div.someclass').hover(function(){
       $(this).addClass('hover_class');
    }, function(){
       $(this).addClass('mouseout_class');
    }
  );
});

Where you have specified the hover_class and mouseout_class in your style sheet with corresponding images eg

<style type="text/css">
 .hover_class {
    background-image: url(url 1);
 }

 .mouseout_class{
    background-image: url(url 2);
 }
</style>

do

$('#thumbnailimg').hover(function(){
    $('#changeme').css('background-image', $(this).children('img').attr('src'));
}, function(){
    $('#changeme').css('background-image', '');
});

本文标签： javascripthow to change div background image in mouse overStack Overflow