将鼠标悬停在链接上并更改div的背景图片-JQuery

Question

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

Answer 1

' 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> 

Answer 2

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

Answer 3

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!

Answer 4

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> 

Answer 5

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>