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:

Test Page

score 5 · Accepted Answer · edited May 23 '17 at 12:08

5

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.

edited May 23 '17 at 12:08

Community

1
1

answered May 13 '11 at 01:52

matchew

19,195
5
44
48

I would normally use css but I am also going to show a hidden div figured I would do them both at the same time – Denoteone May 13 '11 at 02:00
fair enough. If you want to show a hidden div perhaps look into toggle, or slideToggle() or fadeToggle() and also the jquery-ui library if you want more control over the animation. – matchew May 13 '11 at 02:02
I applied your feedback but am still not seeing the change. I added a link above to the page in my post. Not sure what I am doing wrong? – Denoteone May 13 '11 at 02:27
@Denoteone I think your problem is with the way you are applying the .css, I have updated my answer after reviewing your test page. – matchew May 13 '11 at 02:30
Thank you for all your help. Could the issue have to do with my reference to the jquery library? – Denoteone May 13 '11 at 02:47
Perhaps. I tend to do two things 1. keep my scripts at the end of the page and wrap $(function() { //script here }); around my code. This maybe the problem here. – matchew May 13 '11 at 02:53
great! I am guessing the script loaded before the div existed and therefore the div with the ID of fish did not yet exist when it was called. Calling the script on the page load like that allows the page to be loaded by the browser first. – matchew May 13 '11 at 03:03

score 1 · Answer 2 · answered May 13 '11 at 01:53

1

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)");  
});

answered May 13 '11 at 01:53

Yisroel

8,164
4
26
26

Just so I under stand the second function() is to swap the image back to normal...correct? – Denoteone May 13 '11 at 01:55
Yes. .hover() takes 2 functions, one on mouseenter, the second on mouseleave. see http://api.jquery.com/hover/ – Yisroel May 13 '11 at 02:05
Yes, that's correct. Hover is just mainly an alias for mouseenter and mouseleave. – wewals May 13 '11 at 03:26

score 1 · Answer 3 · answered May 13 '11 at 01:55

$('#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.

score 0 · Answer 4 · answered May 13 '11 at 01:52

0

you need mouseover event:

$('#fish').mouseover(...

answered May 13 '11 at 01:52

Sergei

2,747
1
17
16

Change DIV Background on rollover with Jquery

4 Answers4

Linked