Css 当鼠标悬停在柱上时，如何更改截面的背景图像？

‼需要一些帮助‼

如下面的GIF所示，将鼠标悬停在柱上时，背面会发生变化

直到现在，我还不能用css完成这项工作。有人知道解决办法吗

gif:

---

您要做的是使用：hover来选择并操作在它之前编写的元素，这在上面是不可能的。添加一点jQuery会更简单

    <div class="spaniel">

    <div class="blocklife">
        <ul>
            <li><div class="blockz"><h2>Hello I am block</h2><p>I am link</p></div></li>
            <li><div class="blockz"><h2>Hello I am block</h2><p>I am link</p></div></li>
            <li><div class="blockz"><h2>Hello I am block</h2><p>I am link</p></div></li>
            <li><div class="blockz"><h2>Hello I am block</h2><p>I am link</p></div></li>
        </ul>
    </div>


</div>

<style>
    .spaniel{
    background-image:url(http://lorempixel.com/800/600/nature/2);
    background-size:cover;
    background-position:bottom;
height:100vh;
    width:100vw;

}

.blocklife{
    height:40vh;
    width:80vw;
    display:flex;
    justify-content:center;
}
.blocklife ul li{
    display:inline-flex;
    flex-direction:column;
    justify-content:space-around;
    align-content:center;
    align-items:center;
}
.blockz{
    background:rgba(255,255,255,0.4);
    height:100%;
    padding:50px;
}
.blockz:hover{
    background:rgba(255,255,255,0.6)
}
.spaniel2 {
      background:linear-gradient(0deg,rgba(255,0,150,0.3),rgba(255,0,150,0.3)),url(http://lorempixel.com/800/600/nature/2);
    background-size:cover;
    background-position:bottom;
    height:100vh;
    width:100vw;
     }
</style>
<script>
$( ".blockz" ).mouseenter(function() {

  $(".spaniel").addClass("spaniel2");
});


$( ".blockz" ).mouseleave(function() {

  $(".spaniel").removeClass("spaniel2");
});
</script>

你好，我是block我是link

你好，我是block我是link

你好，我是block我是link

你好，我是block我是link


猎犬先生{
背景图片：url(http://lorempixel.com/800/600/nature/2);
背景尺寸：封面；
背景位置：底部；
高度：100vh；
宽度：100vw；
}
.blocklife{
高度：40vh；
宽度：80vw；
显示器：flex；
证明内容：中心；
}
李国宝{
显示：内联flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐内容：居中对齐；
对齐项目：居中；
}
布洛克先生{
背景：rgba（255255,0.4）；
身高：100%；
填充：50px；
}
.布洛克兹：悬停{
背景：rgba（255255,0.6）
}
.猎犬2{
背景：线性梯度（0度，rgba（255,015,0.3），rgba（255,015,0.3）），url(http://lorempixel.com/800/600/nature/2);
背景尺寸：封面；
背景位置：底部；
高度：100vh；
宽度：100vw；
}
$（“.blockz”）.mouseenter（函数（）{
$（“.spaniel”）.addClass（“spaniel2”）；
});
$（“.blockz”）.mouseleave（函数（）{
$（“.spaniel”）.removeClass（“spaniel2”）；
});

    <div class="spaniel">

    <div class="blocklife">
        <ul>
            <li><div class="blockz"><h2>Hello I am block</h2><p>I am link</p></div></li>
            <li><div class="blockz"><h2>Hello I am block</h2><p>I am link</p></div></li>
            <li><div class="blockz"><h2>Hello I am block</h2><p>I am link</p></div></li>
            <li><div class="blockz"><h2>Hello I am block</h2><p>I am link</p></div></li>
        </ul>
    </div>


</div>

<style>
    .spaniel{
    background-image:url(http://lorempixel.com/800/600/nature/2);
    background-size:cover;
    background-position:bottom;
height:100vh;
    width:100vw;

}

.blocklife{
    height:40vh;
    width:80vw;
    display:flex;
    justify-content:center;
}
.blocklife ul li{
    display:inline-flex;
    flex-direction:column;
    justify-content:space-around;
    align-content:center;
    align-items:center;
}
.blockz{
    background:rgba(255,255,255,0.4);
    height:100%;
    padding:50px;
}
.blockz:hover{
    background:rgba(255,255,255,0.6)
}
.spaniel2 {
      background:linear-gradient(0deg,rgba(255,0,150,0.3),rgba(255,0,150,0.3)),url(http://lorempixel.com/800/600/nature/2);
    background-size:cover;
    background-position:bottom;
    height:100vh;
    width:100vw;
     }
</style>
<script>
$( ".blockz" ).mouseenter(function() {

  $(".spaniel").addClass("spaniel2");
});


$( ".blockz" ).mouseleave(function() {

  $(".spaniel").removeClass("spaniel2");
});
</script>