Change DIV Background on rollover with Jquery
I am very new to JQuery but already like it a lot.
I am trying to change a background of a div when the user rollsovers it. But I can not get the bg to update. So far this is what I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#fish{background-image:url(images/fish_off.jpg);width:459px;height:474px;}
</style>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript">
$('#fish').hover(
function(){$('#fish').css({background: "url(images/fish_on.jpg)"})},
function(){$('#fish').css({back开发者_如何学运维ground: "url(images/fish_off.jpg)"})}
);
</script>
</head>
<body>
<div id="fish"></div>
</body>
</html>
Here is my test page and based off the info below I am still having issues:
Test Page
use .mouseenter() or if you want to apply a class on mouseout as well use .hover() http://api.jquery.com/mouseenter/ http://api.jquery.com/hover/
$("div").hover(
function () {
$(this).css("background", "#ddd");
},
function () {
$(this).css("background", "#ccc");
}
);
you can also do this purely through css if you just want a rollver
#fish { background: #fff;
#fish:hover { background: #ccc; }
check out this working fiddle on using hover http://jsfiddle.net/faLdY/
Applying background images via jquery is slightly different checkout this similar question Switching a DIV background image with jQuery
note the way the css is applied in your example page you are doing it incorrectly.
Change
$('#fish').hover(
function(){$('#fish').css({background: "url(images/fish_on.jpg)"})},
function(){$('#fish').css({background: "url(images/fish_off.jpg)"})}
);
to this
$('#fish').hover(
function(){$('#fish').css("background-image", "url(images/fish_on.jpg)")},
function(){$('#fish').css("background-image", "url(images/fish_off.jpg)")}
);
EDIT:
Here is a working fiddle doing exactly what you asked http://jsfiddle.net/C7KxR/
this is linked directly to your images, btw. I hope thats alright.
change
$('#fish').click(function()
{
$('#fish').css("background-image", "url(images/fish_on.jpg)");
});
to
$('#fish').hover(function()
{
$('#fish').css("background-image", "url(images/fish_on.jpg)");
}, function()
{
$('#fish').css("background-image", "url(images/fish_ooff.jpg)");
});
$('#fish').hover(
function(){$('#fish').css({background: "url(images/fish_on.jpg)"})},
function(){$('#fish').css({background: "url(images/fish_off.jpg)"})}
);
You want to use .hover which takes two callbacks. One for mousein and one for mouseout.
you need mouseover event:
$('#fish').mouseover(...
加载中,请稍侯......
精彩评论