将鼠标悬停在特定 <li> 上时如何更改 <ul> 背景图像？ [复制]

Posted 2023-05-08

【中文标题】将鼠标悬停在特定 <li> 上时如何更改 <ul> 背景图像？ [复制]

【英文标题】：How to change <ul> background image while hover on a specific <li>? [duplicate]

【发布时间】：2021-01-17 12:58:33

【问题描述】：

我知道 'li' 它是父 'ul' 的孩子，所以我们不能仅使用 CSS3 来实现它，或者有可能吗？我可以添加 javascript，但我不能更改 html，因为它是由 php 生成的。 用这个简单的例子：

#containerwidth: 500px;
  min-height: 300px;
  background: url("https://cdn.pixabay.com/photo/2016/03/09/11/44/network-1246209_960_720.jpg");
ullist-style: none
a  text-decoration: none;
color: white;
font-size: 32px;
a:hover  text-decoration: none;
color: Chartreuse;
font-size: 32px;
lipadding-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> 

当我将鼠标悬停在“数字 1”上时，我想要 ul 背景是这样的图像：

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

悬停“数字 2”我想要这张 ul 背景图片：

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

最后，当我将鼠标悬停在“数字 3”上时，这张图片对应的 ul 背景发生了变化：

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

谢谢

【问题讨论】：

需要JavaScript

来自副本：***.com/a/39375149/8620333

【参考方案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>

【讨论】：

同级 CSS 是个好主意！一个要记住的技巧。

两种解决方案都可以正常工作，但我希望它能够在没有任何 HTML 代码更改的情况下工作。因为这只是我正在构建的 Wordpress 网站的一个示例，我无法实施任何这些解决方案。我真的只需要改变父母（ul）的背景。

第二个无需更改即可工作，只需更改事件侦听器以不使用数据属性。相反，您需要读取 li 的 id 并更改图像。

我对 JavaScript 不是很熟悉。你能用没有数据属性的JS代码解释一下吗？我会很感激的。

已经有了