how to change div background image in mouse over?
I have some set of list items like-
<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 &开发者_JAVA百科gt;<a href="#"><img src="images/solution5.jpg" border="0"></a></li>
</ul>
</div>
when user moves over the menu items I want to change the background image if DIV -
<div class="hbg">
<!--here I want to display image-->
</div>
how can I do this through jQuery???
I assume you intend to use the src of the image under the li.
$('.smenu li').mouseover( function(){
var src = $(this).find('img').attr('src');
$('.hbg').css('background-image', 'url(' + src + ')');
});
You mean something like following?
$('.smenu li').bind('mouseover', function(){
$('.hbg').css('background-image', 'new image');
});
use hover function of jquery
for example:
$('.menuItem').hover( function(){
$(this).css('background-image', 'image url');
} );
I managed the following:
<!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>
It would be nice to refactor this, but just replace the "color" with "image", and it should be a working solution.
加载中,请稍侯......
精彩评论