我在前端开发领域几乎是个新手。我真的被 CSS 的一个问题困住了。我无法使用悬停效果更改背景图像。如何使用纯 css 更改背景图像。提前谢谢你。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Title </title>
<link rel="stylesheet" type="text/css" href="changecardovernotcompleted.css">
</head>
<body>
<div class="container">
<div class="image-part"></div>
<div class="nav-part">
<ul>
<li><h1>CARD1</h1></li>
<li><h1>CARD2</h1></li>
<li><h1>CARD3</h1></li>
<li><h1>CARD4</h1></li>
</ul>
</div>
</div>
</body>
</html>
css文件是
body{
margin: 0;
padding: 0;
overflow: hidden;
}
.container{
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
left: 50%;
width: 800px;
height: 600px;
background: red;
}
.image-part{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 75%;
background-position: center;
background: yellow;
background-image: url('indir.jpg');
background-size: cover;
}
.nav-part{
position: absolute;
top: 75%;
left: 0;
width: 100%;
height: 25%;
background: green;
}
.container .nav-part ul{
margin: 0;
padding: 0;
position: absolute;
background: black;
color: white;
width: 100%;
height: 100%;
}
.container .nav-part ul li{
float: left;
border-right: 1px solid black;
box-sizing: border-box;
width: 25%;
height: 100%;
background: red;
list-style: none;
display: inline-block;
position: relative;
}
.container .nav-part ul li:last-child
{
border: none;
}
.container .nav-part ul li h1{
position: absolute;
margin: 0;
padding: 0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.container .nav-part ul li:hover{
cursor: pointer;
color: aqua;
background: #564221;
}
.container .nav-part ul li:nth-child(1):hover .image-part
{
background:url(image1.png);
}
.container .nav-part ul li:nth-child(2):hover .image-part
{
background:url(image2.png);
}
.container .nav-part ul li:nth-child(3):hover .image-part
{
background:url(image3.png);
}
.container .nav-part ul li:nth-child(4):hover .image-part
{
background:url(image4.png);
}
因此，例如，我无法更改背景图片
.container .nav-part ul li:nth-child(1):hover .image-part
{
background:url(image1.png);
}
如何使用 css 更改此背景图像。提前谢谢你。
最佳答案
这可以通过纯 CSS 实现。你只需要稍微调整一下你的 HTML，例如
.container > .image-part {
height: 500px;
}
.container > span {
background: yellow;
}
.container > span:hover {
background: green;
}
.container > span:nth-child(1):hover ~ .image-part {
background-color: red;
}
.container > span:nth-child(2):hover ~ .image-part {
background-color: green;
}
.container > span:nth-child(3):hover ~ .image-part {
background-color: blue;
}
.container > span:nth-child(4):hover ~ .image-part {
background-color: yellow;
}<div class="container">
<span>CARD1</span>
<span>CARD2</span>
<span>CARD3</span>
<span>CARD4</span>
<div class="image-part"></div>
</div>注意:要使其正常工作，您的image-part必须直接出现在悬停元素之后(不能嵌套)。此外，您需要为 image-part 指定一个 height，因为它是一个空的 div。
还要记住使用语义 HTML。 ul 中的多个 h1 是一种不好的做法。
关于html - 鼠标悬停时背景图像不会改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51623132/