Chris Lad Chris Lad - 1 day ago 4
HTML Question

Hover on a link and change the background-image of a div - JQuery

Hello I am 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:

Js

$('#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 library: jQuery v2.1.1

Any idea's or advice? thank you in advance

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

Thanks to all who tried to help

Answer

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

Comments