0

I'm having trouble making a div's background-image change when hovering over a link the code looks fine to me so I'm at a loss here is the code:

Javascript:

   $('#hover-01').on('mouseover', function(){
   $('#hover-change').css('background-image', 'url("images/1.jpg")');
});
$('#hover-01').on('mouseout', function(){, function(){
  $('#hover-change').css('background-image', 'url("images/5.jpg")');
});

HTML:

 <div class="open-project-link">
    <a id="hover-01" class="open-project"  
   href="project3.html">Bowman Clay</a>
    </div>


<div class="responsive-section-image" id="hover-change" 
 style="background-image: url(images/5.jpg);">
  <div class="overlay"></div>
                         </div>

jQuery version: v2.1.1

Any idea's or advice?

Edit: the code does work however it was a problem with a 3rd party plugin (I assume) so I fixed it with normal javascript and not jQuery

Djensen
  • 1,337
  • 1
  • 22
  • 32
Chris Lad
  • 349
  • 4
  • 8
  • 24

5 Answers5

2

'mousein' isn't an event handler that you can use. You should use mouseover and mouseout, or mouseenter and mouseleave. See jQuery mouse events here.

You also need to give a width/height to your container that will hold the image, since it has no contents. Also, you have two function() declarations in your mouseout function, I fixed it in the following code sample:

  $('#hover-01').on('mouseenter', function(){
   $('#hover-change').css('background-image', 'url(http://www.w3schools.com/css/trolltunga.jpg)');
});
$('#hover-01').on('mouseleave', function(){
  $('#hover-change').css('background-image', 'url(https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4)');
});
#hover-change {
  width:1000px;
  height:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-project-link">
    <a id="hover-01" class="open-project"  
   href="project3.html">Bowman Clay</a>
    </div>


<div class="responsive-section-image" id="hover-change">
  <div class="overlay"></div>
</div>
Nick G
  • 1,953
  • 12
  • 16
  • Hi @Nick G I have tried a while ago the mouseover and it doesn't seem to want to work I have even copied and pasted your code just to make sure and it stil doesn't work sadly – Chris Lad Nov 30 '16 at 13:36
  • @ChrisLad I fixed it in my edit. There's a working example. – Nick G Nov 30 '16 at 13:53
  • It should work but how ever when i try to put it to the site it doesn't work and says $ is not defined the only thing i can think of is maybe another plugin messing it up because everything seems fine code wise to me and i see it working on fiddle – Chris Lad Nov 30 '16 at 14:00
  • if it says `$ is not defined` that means that you haven't linked a jQuery library to your code. – kzhao14 Nov 30 '16 at 14:02
  • @ChrisLad There's a problem with how you're linking jQuery then. Assuming you have jQuery in the js folder, try changing your script to either `` or ``. – Nick G Nov 30 '16 at 14:04
  • I have other js functions that are working fine so the library is linked correctly – Chris Lad Nov 30 '16 at 14:13
  • 1
    @ChrisLad Make sure jQuery is the first script loaded also. If any other js files use `$()` without jQuery already being rendered, then you'll get that error. – Nick G Nov 30 '16 at 14:14
  • The error has gone but it still does not work i've copied everything to the T this is really strange it has to be a plugin I am using or something – Chris Lad Nov 30 '16 at 14:20
  • 1
    @ChrisLad Definitely could be. Here's a question with the same problem, maybe this will help? http://stackoverflow.com/questions/2194992/jquery-is-not-defined – Nick G Nov 30 '16 at 14:23
  • @ChrisLad let me know if you need any other advice, I'll try but can't guarantee since I can't see your setup. – Nick G Nov 30 '16 at 14:56
  • I went down the old javascript rather than jQuery way to fix it – Chris Lad Nov 30 '16 at 15:12
0

Use this fiddle:

JS:

$('#hover-01').on('mouseenter', function(){
   $('#hover-change').css('background-image', 'url("images/1.jpg")');
});
$('#hover-01').on('mouseout', function(){
  $('#hover-change').css('background-image', 'url("images/5.jpg")');
});
RonyLoud
  • 2,408
  • 2
  • 20
  • 25
0

You can use jQuery's toggleClass() method to solve your problem like this:

$(document).on('ready', function() {
  
  $('#link').on('mouseover', function() {
    //alert('sadasd');
    $('body').toggleClass('colored');
  });
  
  $('#link').on('mouseleave', function() {
    //alert('sadasd');
    $('body').toggleClass('colored');
  });
  
});
body.colored {
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a id="link" href="#">This is a Link</a>
</div>

Hope this helps!

Saumya Rastogi
  • 13,159
  • 5
  • 42
  • 45
0

You can use the CSS :hover ~ to change the hover-change div when hover-01 is hovered over as follows:

#divToHover:hover ~ #divToChange {
  /*your code here*/
}


#change {
  height: 300px;
  width: 300px;
  background-image: url("//www.google.com/favicon.ico");
}
#hover {
  height: 40px;
  width: 40px;
  background-color: green;
}
#hover:hover ~ #change {
  background-image: url(/favicon.ico);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="hover">hover</div>
<div id="change"></div>
kzhao14
  • 2,470
  • 14
  • 21
0

Try the following code. Make sure to set height and width for the div for which you want the background change.

Issue was with your event name used. Refer here for list of mouse events

$('#hover-01').on('mouseover', function() {
     $('#hover-change').css('background-image', 'url("https://placehold.it/350x150/ffff00")');
   }).on('mouseout', function() {
     $('#hover-change').css('background-image', 'url("https://placehold.it/350x150/ff0000")');
   });
.responsive-section-image {
  height: 150px;
  width: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="open-project-link">
  <a id="hover-01" class="open-project" href="project3.html">Bowman Clay</a>
</div>

<div class="responsive-section-image" id="hover-change" style="background-image: url('https://placehold.it/350x150/ff0000')">
  <div class="overlay"></div>
</div>
Shebin
  • 111
  • 3
  • 8