如何在将鼠标悬停在特定 <li> 上时更改 <ul> 背景图片？

Question

我知道 'li' 它是 parent 'ul' 的 child 所以我们不能只用 CSS3 实现它或者是它可能的？我可以添加 JavaScript 但我无法更改 HTML，因为它是由 PHP 生成的。用这个简单的例子：

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

当我悬停时 'Number 1' 我想要那个 ul 背景，它将是这个图像：

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

悬停'Number 2'我想要这张ul背景图片：

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

最后，当我将鼠标悬停在 li 'Number 3' 上时，这张图片的 ul 背景发生了变化：

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

谢谢

Answer 1

您目前无法使用 CSS 更改父项。你可以改变兄弟姐妹。

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

如果想和父级一起保存，需要使用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>

因为你说你不想改变任何东西，所以使用 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>

如何在将鼠标悬停在特定 <li> 上时更改 <ul> 背景图片？

How to change <ul> background image while hover on a specific <li>?

javascript

css

background

hover