如何解决将鼠标悬停在特定的<li>上时如何更改<ul>背景图像?
我知道'li'是父级'ul'的子代,所以我们不能仅使用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>
当我将鼠标悬停在“数字1”上时,我希望背景是这张图片:
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")
最后,当我将li悬停在“数字3”上时,此图片的对应ul背景更改:
url("https://cdn.pixabay.com/photo/2016/01/14/05/51/rj45-1139366_960_720.jpg")
谢谢
解决方法
当前您不能使用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>
因为您说您不想更改任何内容,所以请使用ID
var ul = document.querySelector("#container");
function toggleIt(event) {
const onOff = event.type === 'mouseenter';
var li = event.currentTarget;
var cls = li.id;
console.log(onOff,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。