如何在鼠標上更改div背景圖片？

我有一些設置列表項喜歡 -如何在鼠標上更改div背景圖片？

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

來源

2010-06-21 nectar

你是說你想改變div的類別嗎？在考慮第二個代碼片段時，您的問題沒有多大意義。請解釋。 – jessegavin 2010-06-21 17:03:55

我假設你打算使用圖像的src下li。

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

來源

2010-06-21 17:07:50 user113716

你的意思是像下面的東西？

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

來源

2010-06-21 17:05:18 azatoth

使用jQuery

的hover功能，例如：

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

來源

2010-06-21 17:05:55

我所管理的以下內容：

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

這將是不錯重構這一點，但只是取代「色」與「形象」，它應該是一個有效的解決方案。

來源

2010-06-21 18:38:22 d8uv

如何在鼠標上更改div背景圖片？

回答

相關問題