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

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

0 голосов
/ 21 июня 2010

У меня есть некоторый набор элементов списка, таких как - 

<div class="smenu">
                <ul>
                  <li ><a href="index.html"><img src="images/solution1.jpg" border="0"></a></li>
                  <li ><a href="#"><img src="images/solution2.jpg" border="0"></a></li>
                  <li ><a href="#"><img src="images/solution3.jpg" border="0"></a></li>
                  <li ><a href="#"><img src="images/solution4.jpg" border="0"></a></li>
                  <li ><a href="#"><img src="images/solution5.jpg" border="0"></a></li>                   
                </ul>
              </div>

, когда пользователь перемещается по элементам меню, я хочу изменить фоновое изображение, если DIV - 

 <div class="hbg">
        <!--here I want to display image--> 
          </div>

как я могу сделать это через jQuery ???

Ответы [ 4 ]

2 голосов
/ 21 июня 2010

использование hover функция jquery

например: 

 $('.menuItem').hover( function(){ 
      $(this).css('background-image', 'image url'); 
   } );
2 голосов
/ 21 июня 2010

Я предполагаю, что вы намереваетесь использовать src изображения под li. 

$('.smenu li').mouseover( function(){
    var src = $(this).find('img').attr('src');
    $('.hbg').css('background-image', 'url(' + src + ')');
});
2 голосов
/ 21 июня 2010

Вы имеете в виду что-то вроде следующего? 

$('.smenu li').bind('mouseover', function(){
  $('.hbg').css('background-image', 'new image');
});
1 голос
/ 21 июня 2010

Мне удалось следующее: 

<!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"></script> 

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

Было бы неплохо реорганизовать это, но просто замените "color" на "image", и это должно быть рабочим решением.

...