Change a background image on hover

Question

I need to change a background image in a div on a hover on an a link. I currently have the image changing when you click on the link but I need it on hover so when the link it clicked it goes to a specific web page.

This is what I currently have

http://www.twist-dev.co.uk/hover/

Any ideas or help much appreciated.

Hi James, please add a [mcve] to the question itself rather than linking to a site elsewhere. — TylerH, May 21 '18 at 13:45
You can assign ids to different links and using css you can have hover effects, on those particular links — Mohd Tabish Baig, May 21 '18 at 13:46
Please read: [Something on my website doesn't work, can I just paste a link to it?](https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it) — Pete, May 21 '18 at 13:50
Possible duplicate of [Change the image source on rollover using jQuery](https://stackoverflow.com/questions/540349/change-the-image-source-on-rollover-using-jquery) — Calvin Nunes, May 21 '18 at 13:52

score 1 · Accepted Answer · 2018-05-21T14:01:00.717

js

$(".list li a").hover( function() { // Changes the .image-holder's img src to the src defined in .list a's data attribute.
    var value=$(this).attr('data-src');
    $(".image-holder img").attr("src", value);
});

css

.image-holder {
      float: left;
      margin-right: 100px;
      display: block;
      width: 350px;
      height: 500px;
      background-color: grey;
    }

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-top: 200px;  
}

a {
  color: red;
  margin-bottom: 20px;
  text-decoration: none;    
  display: inline-block;    
  text-transform: uppercase;
  font-family: Arial, sans-serif;
}

html

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="image-holder">
      <img src="http://placehold.it/350x150">
    </div>
    <ul class="list">
      <li><a href="#" data-src="http://placehold.it/350x150">Link 1</a></li>
      <li><a href="#" data-src="http://placehold.it/350x250">Link 2</a></li>
      <li><a href="#" data-src="http://placehold.it/350x350">Link 3</a></li>
    </ul>

score 0 · Answer 2 · answered May 21 '18 at 13:47

You could use mousenter and mouseleave events.

Your code would be:

$(document).ready(function() {
    $("#cf7_controls > span").mouseenter(function() {
        $("#cf7 img").removeClass("opaque");

        var newImage = $(this).index();

        $("#cf7 img").eq(newImage).addClass("opaque");

        $("#cf7_controls span").removeClass("selected");
        $(this).addClass("selected");
    });
});

You can find more details here : https://api.jquery.com/mouseenter/

score 0 · Answer 3 · answered May 21 '18 at 13:55

A way to achieve it would be for example to add a data attribute to the children of your menu container

  <p id="cf7_controls">
  <span class="selected"></span>
  <span data-image="cylinder">CYLINDER HEAD &amp; BARRELS</span>
  <span data-image="crankcase">CRANKCASES</span>
  <span data-image="cooling">COOLING SYSTEM</span>
  <span data-image="intervals">ENGINE INTERNALS</span>
  </p>

And then in your javascript file add

$("#cf7_controls span").hover(function(){

//Find the image wich refers to the hovered link
var image = $(this).data("image");
$( "img[src^="+image+"]").css({ opacity: 1 });

})

score 0 · Answer 4 · answered May 21 '18 at 13:57

Here is the required code:

p#cf7_controls {
  text-align:center;
}
#cf7_controls span {
  padding-right:2em;
  cursor:pointer;
}
#cf7 {
  position:relative;
  height:519px;
  width:548px;
  margin:0 auto 10px;
}
#cf7 img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

#cf7 img.opaque {
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
}

    <body>
    
    <div id="cf7" class="shadow">
      <img class='opaque' src="https://www.twist-dev.co.uk/hover/base.png"/>
      <img src="https://www.twist-dev.co.uk/hover/https://www.twist-dev.co.uk/hover/cylinder.png" alt='1'/>
      <img src="https://www.twist-dev.co.uk/hover/crankcase.png" alt='2'/>
      <img src="https://www.twist-dev.co.uk/hover/cooling.png" alt='3'/>
      <img src="https://www.twist-dev.co.uk/hover/intervals.png" alt='4'/>
    </div>
    <p id="cf7_controls">
      <span class="selected"></span>
      <span>CYLINDER HEAD & BARRELS</span>
      <span>CRANKCASES</span>
      <span>COOLING SYSTEM</span>
      <span>ENGINE INTERNALS</span>
    </p>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
     $(document).ready(function() {
      $("#cf7_controls span").on('mouseover', function() {
        $("#cf7 img").removeClass("opaque");
    
        var newImage = $(this).index();
    
        $("#cf7 img").eq(newImage).addClass("opaque");
    
        $("#cf7_controls span").removeClass("selected");
        $(this).addClass("selected");
      });
    });
    </script>
    
    </body>

Change a background image on hover

4 Answers4