Как изменить фоновое изображение сечения при наведении на столб?

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