CODEWITHSUNDEEP
htmlcssimagehoverhtml-lists
BILLYMAYSGHOST
BILLYMAYSGHOST

Reputation: 25

Change image when hovering over li and keep that image permanent using CSS

For the life of me I can't figure it out. Essentially there is an image place holder that loads on page visit. Then when I hover over option 1, 2 or 3 a new image takes its place and becomes permanent until I hover another option. Is this possible? 

<div>
[Image - Loads on Visit]
[Image 2- Hidden until hover on li]
[Image 3- Hidden until hover on li]
</div>  

<div>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>

Upvotes: 1

Views: 1071

Answers (2)

Noah
Noah

Reputation: 80

Here is another way to do it with jQuery. You will have to load in your own images to really see it work.

Here is the working fiddle!

https://jsfiddle.net/ur7tns7L/

I took away

    $(#element).on("mouseleave",function(){


});

This makes the image permanent until another is hovered over.

Upvotes: 1

Chris Cook
Chris Cook

Reputation: 514

Your best way to do this would be with JavaScript. jQuery will make your job even easier. Do something like this for each of your images:

$( document ).ready(function() {
    $('li.list-class-1').mouseover(function(){
        $('.img-1').css({"display": "block"});
        $('.img-2').css({"display": "none"});
        $('.img-3').css({"display": "none"});
    });
    $('li.list-class-2').mouseover(function(){
        $('.img-2').css({"display": "block"});
        $('.img-1').css({"display": "none"});
        $('.img-3').css({"display": "none"});
    });
    $('li.list-class-3').mouseover(function(){
        $('.img-3').css({"display": "block"});
        $('.img-1').css({"display": "none"});
        $('.img-2').css({"display": "none"});
    });
});

This code just sets the display of the relevant image when you mouse over the list items. you need to give some classes (or IDs) to your list items and images.

Upvotes: 1

Related Questions