Question

我在前端开发领域几乎是新手。我真的对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更改此背景图像。预先谢谢你。

Answer 1

使用纯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 必须必须紧接在悬停元素之后（不能嵌套）。此外，您需要为height指定一个image-part，因为它是空的div。

还请记住使用语义HTML。在h1中使用多个ul是一个坏习惯。

Answer 2

正如SüleymanAcar在您的评论中提到的那样，您的CSS选择器是错误的，我认为您不能使用当前版本的CSS选择父元素。

虽然可以使用jQuery来解决-请看下面的示例：

$(document).ready(function(){
    $(".container .nav-part ul li:nth-child(1)").hover(function(){
        $(".image-part").css("background-image", "url('https://vectortoons.com/wp-content/uploads/2018/04/a-hobo-smoking-cigarette-on-a-solid-white-smoke-f7f4f3-background-800x450.jpg'");
        }, function(){
        $(".image-part").css("background-image", "none");
    });
});

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 380px;
  height: 160px;
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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>

鼠标悬停时背景图像不会改变

2 个答案: