Change DIV Background on rollover with Jquery
Question
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({background: "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:
4 answers
solution1
5 ACCPTED 2011-05-13 01:52:03
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.
solution2
1 2011-05-13 01:53:05
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)");
});
solution3
1 2011-05-13 01:55:08
$('#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.
solution4
0 2011-05-13 01:52:51
你需要鼠标悬停事件：
$('#fish').mouseover(...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.