comment changer l'image de fond div dans la souris sur?

J'ai un certain ensemble d'éléments de liste comme-comment changer l'image de fond div dans la souris sur?

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

lorsque l'utilisateur se déplace sur les éléments du menu que je veux changer l'image d'arrière-plan si DIV -

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

comment puis-je faire à travers jQuery ???

Source

2010-06-21 nectar

Voulez-vous dire que vous voulez changer la classe de la div quand il est plané? Votre question n'a pas beaucoup de sens lorsque vous prenez en compte le deuxième extrait de code. S'il vous plaît, expliquez. – jessegavin

Je suppose que vous avez l'intention d'utiliser le src de l'image sous la li.

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

Source

2010-06-21 17:07:50 user113716

Vous voulez dire quelque chose comme suivre?

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

Source

2010-06-21 17:05:18 azatoth

utilisation hover fonction de jquery

par exemple:

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

Source

2010-06-21 17:05:55

Je géré les suivantes:

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

Il serait agréable de factoriser, mais il suffit de remplacer la « couleur » avec « image », et il devrait être une solution de travail.

Source

2010-06-21 18:38:22 d8uv

comment changer l'image de fond div dans la souris sur?

Répondre

Questions connexes