Css3：将鼠标悬停在div1上，在div2&；中创建反应；3.

我正在尝试创建一个动画，在上面的div上悬停会触发下面div的反应

我希望实现的是flow-on效果，将鼠标悬停在最上面一行的任何一个

上都会触发最下面一行也向下推

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

/*动画2.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>

预加载程序4{
位置：相对位置；
}
#预紧器4跨度{
利润率最高：6.4%；
位置：绝对位置；
宽度：8em；
高度：8em；
背景：#3498db；
不透明度：0.8；
边界半径：8em；
过渡性质：边缘顶端；
过渡时间功能：轻松；
过渡时间：0.8s；
}
#预载器4跨度：悬停{
利润率最高：7.5%；
}    
#预紧器4跨度：第n个孩子（2）{
左：8em；
动画延迟：.2s；
}
#预紧器4跨度：第n个孩子（3）{
左：16em；
动画延迟：.2s；
}
/*小圆圈*/
#预紧器3{
位置：相对位置；
}
#预紧器3跨度{
利润率最高：3.0%；
位置：绝对位置；
宽度：4em；
高度：4em；
背景：#9d4abf；
不透明度：0.9；
边界半径：4em；
左：4em；
过渡性质：边缘顶端；
过渡时间功能：轻松；
过渡时间：0.5s；
}    
#预加载装置3跨度：悬停{
利润率最高：4.5%；
}        
#预紧器_3跨度：第n个孩子（2）{
左：8em；
动画延迟：.1s；
}
#预紧器3跨度：第n个孩子（3）{
左：12em；
动画延迟：.1s；
}
#预紧器3跨度：第n个孩子（4）{
左：16em；
动画延迟：.1s；
}
#预紧器3跨度：第n个孩子（5）{
左：20em；
动画延迟：.1s；
}
/*最小绿圈*/
#预紧器2{
位置：相对位置；
}
#预紧器2跨度{
利润率最高：1%；
位置：绝对位置；
宽度：2米；
高度：2米；
背景：#6ee3dd；
不透明度：1.0；
边界半径：2米；
左：4em；
过渡性质：边缘顶端；
过渡时间功能：轻松；
过渡时间：0.3s；
}
#预载器2跨度：悬停{
利润率最高：1.5%；
}    
#预紧器2跨度：第n个子（2）{
左：4em；
动画延迟：.0s；
}
#预紧器2跨度：第n个孩子（3）{
左：6em；
动画延迟：.0s；
}
#预紧器2跨度：第n个孩子（4）{
左：8em；
动画延迟：.0s；
}
#预紧器2跨度：第n个孩子（5）{
左：10em；
动画延迟：.0s；
}
#预紧器2跨度：第n个孩子（6）{
左：12em；
动画延迟：.0s；
}
#预紧器2跨度：第n个孩子（7）{
左：14em；
动画延迟：.0s；
}
#预紧器2跨度：第n个孩子（8）{
左：16em；
动画延迟：.0s；
}
#预紧器2跨度：第n个孩子（9）{
左：18em；
动画延迟：.0s；
}
#预紧器2跨度：第n个孩子（10）{
左：20em；
动画延迟：.0s；
}
#预紧器2跨度：第n个孩子（11）{
左：22em；
动画延迟：.0s；
}

我想我得到了你想要的。使用jQuery是可能的。 您应该在这里使用jquery的兄弟（）方法。 我会像这样使用它-

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

我希望实现的是“流上效应”，通过悬停在最上面一行的任何一个人身上，会触发最下面一行也向下推

给出最上面一行：

指针事件：无

Jquery:
$（“按钮行”）.hover（函数（）{…}）
那么你的问题是什么？很抱歉把重点弄混了。我想做的是创造一个流动效果。因此，将鼠标悬停在第一个div（预载器_4）上会触发其他两个div也会做出反应，就像它们自己被悬停在上面一样。我的问题是这是否可能？你的文章被归类为需要改进，我编辑了它，因为它让我“帮助并改进”它，这是我尽力做到的：因为你可以在文本中使用标记和一些HTML，你必须引用内联HTML语句，如
，否则它们将无法显示。你也应该阅读，不要在以后的帖子中提及闲聊，好吧，谢谢你的提示Blackus，我对这一点很陌生，但我会仔细阅读你的文章，以便将来更好地调整我问题的格式。谢谢你花时间看一下这个。干杯。嘿，苏米，谢谢你的帮助。我不熟悉JQuery格式&我已经将您的代码添加到我的css文档中，但我认为我的格式不正确，因为我只得到一个空白文档。我是否需要像在Php中那样编写自己的函数？例如，悬停（功能（创建页边距底部）{嘿，Sumi，再次感谢你上面的回答。我将对jQuery进行一些研究，如果我需要配置你的建议，我会在研究之后再回来找你。嘿，Sumi，我已经掌握了使用jQuery兄弟姐妹的诀窍。只需问一个问题，根据你提出的解决方案，你能找到一种撤销悬停效果的方法吗？也就是说，当我不再悬停时，你可以吗兄弟姐妹返回到悬停前状态？不，他们没有。你必须编写额外的代码行，并通过一些小的更改来操纵你想要实现的内容。嗨，Trung，感谢你花时间讨论这个问题。我正在试用你的方法和其他一些方法。我会让你知道我的做法：）只有一个问题，你说的“顶行”是什么意思？…你必须给他们两个位置：绝对；顶部的z指数总是高于底部。