Question

！可以使用某些帮助！

如下面GIF所示，当悬停在列上时，背景会发生变化。

直到现在，我无法使用CSS完成此操作。有谁知道解决方案。

gif：https://www.vhd.nl/wp-content/uploads/2019/07/gif-vhd.gif

#colum4:hover + #sectie21 {
    background-image:   url('/img/wp-content/uploads/sites/15/2019/06/vhd-backgound-overlay.jpg')
    !important;
  }

Answer 1

您要执行的操作是使用：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>

https://codepen.io/JW-Based/pen/OerLNp

将鼠标悬停在柱上时如何更改节的背景图像？

1 个答案: