как изменить фоновое изображение div при наведении мыши?

Question

У меня есть 7 уменьшенных изображений меню. Когда пользователь указывает (mouseover) на определенный эскиз, я хочу изменить фоновое изображение <div> на соответствующее изображение этого эскиза.

Меню миниатюр изображений в разностном div

Answer 1

Что не так с чистым CSS?

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

Просто измените div.thumbnail, чтобы отобразить ваш div и имя класса или идентификатора (в случае идентификатора замените . на #)

Answer 2

Вы можете использовать jQuery что-то вроде:

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

Где вы указали hover_class и mouseout_class в вашей таблице стилей с соответствующими изображениями, например

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

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

Answer 3

сделать

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