Changing the background-image from a list of images

Question

I have actually a structure like this.

<div class="container">
   <ul>
       <li>
         <img>
       </li>
   </ul>
</div>

There is always a background image for the main container. What I want to achieve is to change the background image of the container when I hover the mouse on the image in the list. And the background-image should be the one in the list.

and when the mouse is away, the background image should be the original (the one at the beginning).

Is it possible to do it with css only? or javascript?

Thanks.

with CSS only no you cannot ... with JS/jQuery yes you can ;) — Temani Afif, Feb 19 '18 at 14:02
You can do this with css using the [:nth-child() selector.](https://www.w3schools.com/cssref/sel_nth-child.asp) — , Feb 19 '18 at 14:09

score 1 · Answer 1 · answered Feb 19 '18 at 14:02

1

It can not be achieved using CSS. It's in the name: Cascading Style Sheets only supports styling in cascading direction, not up.

You can do this using Javascript

var myDiv = document.getElementById('foo');

myDiv.onmouseenter = function() { 
    // code to change image here
}

myDiv.onmouseleave = function() { 
    // code to reset to old image here
}

answered Feb 19 '18 at 14:02

void

36,090
8
62
107

Care to explain the downvotes? – void Feb 19 '18 at 14:05
No downvotes. You have no votes. – Feb 19 '18 at 14:06
@WillHoskings yes, there are downvotes.... – Jordi Castilla Feb 19 '18 at 14:07
@WillHoskings learning for you then, you need to click on number of votes to see how many upvotes and downvotes you have. In my case click on 0. Its +1 and -1 :) – void Feb 19 '18 at 14:07
1

@void Will has 71 rep, so can't do this action until 1000 rep points as stated here https://stackoverflow.com/help/privileges – Jordi Castilla Feb 19 '18 at 14:12
1

Oh ok, was getting a bit confused there. I'll check out the points ladder page later just to catch up. – Feb 19 '18 at 14:14
1

@JordiCastilla oh missed that! – void Feb 19 '18 at 14:15

Changing the background-image from a list of images

1 Answers1