CSS3 : Hover on div1 to create reaction in div 2 & 3?

Question

我正在尝试创建一个动画，将鼠标悬停在顶部的 div 上会触发下面的 div 中的 react 。

我希望实现的是悬停在任何人身上的流动效果 <span>在顶行将触发底行也向下推。

原始 CSS 不是我的创作，我只是在已有作品的基础上构建/编辑。

/* animation2.css */

#preloader_4{
     position:relative;
    }

#preloader_4 span{
     margin-top: 6.4%;
     position:absolute;
     width:8em;
     height:8em;
     background:#3498db;
     opacity:0.8;
     border-radius:8em;
     transition-property: margin-top;
     transition-timing-function: ease;
     transition-duration: 0.8s; 
    }

#preloader_4 span:hover{
     margin-top:7.5%;     
    }    

#preloader_4 span:nth-child(2){
    left:8em;
    animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
    left:16em;
    animation-delay: .2s;
}


/* Smaller circles */


#preloader_3{
     position:relative;
    }
#preloader_3 span{
     margin-top: 3.0%;
     position:absolute;
     width:4em;
     height:4em;
     background:#9d4abf;
     opacity:0.9;
     border-radius:4em;
     left:4em;
     transition-property: margin-top;
     transition-timing-function: ease;
     transition-duration: 0.5s; 
    }    

#preloader_3 span:hover{
     margin-top: 4.5%;
    }        

#preloader_3 span:nth-child(2){
    left:8em;
    animation-delay: .1s;
}
#preloader_3 span:nth-child(3){
    left:12em;
    animation-delay: .1s;
}
#preloader_3 span:nth-child(4){
    left:16em;
    animation-delay: .1s;
}
#preloader_3 span:nth-child(5){
    left:20em;
    animation-delay: .1s;
}


/* Smallest Green circles */

#preloader_2{
     position:relative;
    }
#preloader_2 span{
     margin-top: 1%;
     position:absolute;
     width:2em;
     height:2em;
     background:#6ee3dd;
     opacity:1.0;
     border-radius:2em;
     left:4em;
     transition-property: margin-top;
     transition-timing-function: ease;
     transition-duration: 0.3s; 
    }
#preloader_2 span:hover{
     margin-top:1.5%; 
    }    

#preloader_2 span:nth-child(2){
    left:4em;
    animation-delay: .0s;
}
#preloader_2 span:nth-child(3){
    left:6em;
    animation-delay: .0s;
}
#preloader_2 span:nth-child(4){
    left:8em;
    animation-delay: .0s;
}
#preloader_2 span:nth-child(5){
    left:10em;
    animation-delay: .0s;
}
#preloader_2 span:nth-child(6){
    left:12em;
    animation-delay: .0s;
}
#preloader_2 span:nth-child(7){
    left:14em;
    animation-delay: .0s;
}
#preloader_2 span:nth-child(8){
    left:16em;
    animation-delay: .0s;
}
#preloader_2 span:nth-child(9){
    left:18em;
    animation-delay: .0s;
}
#preloader_2 span:nth-child(10){
    left:20em;
    animation-delay: .0s;
}
#preloader_2 span:nth-child(11){
    left:22em;
    animation-delay: .0s;
}

<div id="preloader_2">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

<div id="preloader_3">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>       
         </div>

<div id="preloader_4">
            <span></span>
            <span></span>
            <span></span>
        </div>        
</body>
</html>

Answer 1

我想我在这里得到了你想要的。使用 jQuery 是可能的。 你应该在这里使用 jquery 的 siblings() 方法。 我会像这样使用它-

$('#preloader_2').hover(function() {
    $(this).siblings().css('//your code here');
});