How to change
background image while hover on a specific
?

Question

I know that 'li' it is a child of the parent 'ul' so We can't achieve it only with CSS3 or is it possible? I can add JavaScript but i can't change HTML because it is generated by PHP. With this simple example:

#container{width: 500px;
  min-height: 300px;
  background: url("https://cdn.pixabay.com/photo/2016/03/09/11/44/network-1246209_960_720.jpg");}
ul{list-style: none}
a { text-decoration: none;
color: white;
font-size: 32px;}
a:hover { text-decoration: none;
color: Chartreuse;
font-size: 32px;}
li{padding-top: 1em;}

/* url("https://cdn.pixabay.com/photo/2016/08/12/14/25/abstract-1588720_1280.jpg")
  
url("https://cdn.pixabay.com/photo/2015/01/12/17/40/padlock-597495_960_720.jpg")
  
  url("https://cdn.pixabay.com/photo/2016/01/14/05/51/rj45-1139366_960_720.jpg")
  
  */

<ul id="container">
  <li id="option1">
    <a href="#">Number 1</a>
  </li>
  <li id="option2">
    <a href="#">Number 2</a>
  </li>
  <li id="option3">
    <a href="#">Number 3</a>
  </li>
</ul>

when I hover 'Number 1' I want that ul background it will be this image:

url("https://cdn.pixabay.com/photo/2016/08/12/14/25/abstract-1588720_1280.jpg")

hovering 'Number 2' I want this ul background image:

url("https://cdn.pixabay.com/photo/2015/01/12/17/40/padlock-597495_960_720.jpg")

and finally when I hover li 'Number 3' the correspondent ul background change for this image:

url("https://cdn.pixabay.com/photo/2016/01/14/05/51/rj45-1139366_960_720.jpg")

Thank You

from the duplicate: https://stackoverflow.com/a/39375149/8620333 — Temani Afif, Oct 01 '20 at 19:25

epascarello · Accepted Answer · 2020-10-05T13:26:16.143

You can not alter the parent with CSS at this current time. You can alter a sibling.

#container {
  width: 500px;
  position: relative;
  min-height: 300px;
}

ul {
  list-style: none
}

a {
  text-decoration: none;
  color: white;
  font-size: 32px;
}

a:hover {
  text-decoration: none;
  color: Chartreuse;
  font-size: 32px;
}

li {
  padding-top: 1em;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url("https://cdn.pixabay.com/photo/2016/03/09/11/44/network-1246209_960_720.jpg");
  transition: background-image 0.3s ease-in-out;
}

#option1:hover~.bg {
  background: url("https://cdn.pixabay.com/photo/2016/08/12/14/25/abstract-1588720_1280.jpg");
}

#option2:hover~.bg {
  background: url("https://cdn.pixabay.com/photo/2015/01/12/17/40/padlock-597495_960_720.jpg");
}

#option3:hover~.bg {
  background: url("https://cdn.pixabay.com/photo/2016/01/14/05/51/rj45-1139366_960_720.jpg");
}

<ul id="container">
  <li id="option1">
    <a href="#">Number 1</a>
  </li>
  <li id="option2">
    <a href="#">Number 2</a>
  </li>
  <li id="option3">
    <a href="#">Number 3</a>
  </li>
  <li class="bg"></li>
</ul>

If you want to keep it with the parent, you need to use JavaScript.

var ul = document.querySelector("#container");

function toggleIt(event) {
  const onOff = event.type === 'mouseenter';
  var li = event.currentTarget;
  var cls = li.dataset.bg;
  console.log(onOff, cls);
  ul.classList.toggle(cls, onOff);
}

var lis = document.querySelectorAll("ul li")
lis.forEach(function(li) {
  li.addEventListener("mouseenter", toggleIt);
  li.addEventListener("mouseleave", toggleIt);
});

#container {
  width: 500px;
  min-height: 300px;
  background: url("https://cdn.pixabay.com/photo/2016/03/09/11/44/network-1246209_960_720.jpg");
  transition: background-image 0.3s ease-in-out;
}

ul {
  list-style: none
}

a {
  text-decoration: none;
  color: white;
  font-size: 32px;
}

a:hover {
  text-decoration: none;
  color: Chartreuse;
  font-size: 32px;
}

li {
  padding-top: 1em;
}

#container.bg1 {
  background-image: url("https://cdn.pixabay.com/photo/2016/08/12/14/25/abstract-1588720_1280.jpg");
}

#container.bg2 {
  background-image: url("https://cdn.pixabay.com/photo/2015/01/12/17/40/padlock-597495_960_720.jpg");
}

#container.bg3 {
  background-image: url("https://cdn.pixabay.com/photo/2016/01/14/05/51/rj45-1139366_960_720.jpg");
}

<ul id="container">
  <li id="option1" data-bg="bg1">
    <a href="#">Number 1</a>
  </li>
  <li id="option2" data-bg="bg2">
    <a href="#">Number 2</a>
  </li>
  <li id="option3" data-bg="bg3">
    <a href="#">Number 3</a>
  </li>
</ul>

because you said you do not want to change anything, use the ids

var ul = document.querySelector("#container");

function toggleIt(event) {
  const onOff = event.type === 'mouseenter';
  var li = event.currentTarget;
  var cls = li.id;
  console.log(onOff, cls);
  ul.classList.toggle(cls, onOff);
}

var lis = document.querySelectorAll("ul li")
lis.forEach(function(li) {
  li.addEventListener("mouseenter", toggleIt);
  li.addEventListener("mouseleave", toggleIt);
});

#container {
  width: 500px;
  min-height: 300px;
  background: url("https://cdn.pixabay.com/photo/2016/03/09/11/44/network-1246209_960_720.jpg");
  transition: background-image 0.3s ease-in-out;
}

ul {
  list-style: none
}

a {
  text-decoration: none;
  color: white;
  font-size: 32px;
}

a:hover {
  text-decoration: none;
  color: Chartreuse;
  font-size: 32px;
}

li {
  padding-top: 1em;
}

#container.option1 {
  background-image: url("https://cdn.pixabay.com/photo/2016/08/12/14/25/abstract-1588720_1280.jpg");
}

#container.option2 {
  background-image: url("https://cdn.pixabay.com/photo/2015/01/12/17/40/padlock-597495_960_720.jpg");
}

#container.option3 {
  background-image: url("https://cdn.pixabay.com/photo/2016/01/14/05/51/rj45-1139366_960_720.jpg");
}

<ul id="container">
  <li id="option1">
<a href="#">Number 1</a>
  </li>
  <li id="option2">
<a href="#">Number 2</a>
  </li>
  <li id="option3">
<a href="#">Number 3</a>
  </li>
</ul>

Both solutions works fine but i want that to work without any HTML code change. Because this is only an example of a Wordpress website that i am constructing and i can't implement any of these solutions. I really need to change only the background of the parent (ul). — palm design, Oct 04 '20 at 23:36
Well second one can work without changes, just have to change the event listener to not use data attributes. Instead you would need to read the ids of the li and alter the image. — epascarello, Oct 05 '20 at 13:24
I am not very familiar with JavaScript. Can you please explain it with JS code without data attributes? I'll be grateful. — palm design, Oct 05 '20 at 23:04
that's all great soluction but i have another doubt. What if I have a div with the class ".parent-div" before the ul and i want to change the div's background? per example: ´´´

Number 1

Number 2

Number 3

´´´ — palm design, Jan 12 '21 at 04:12

How to change background image while hover on a specific ?

1 Answers1

How to change
background image while hover on a specific
?