CSS3 - 如何在悬停在另一个元素上时使一个元素（最好是 div 元素）移动？

Question

我一直在尝试使一个元素移动，比如通过悬停在另一个div元素上从一个点到另一个点。但我不知道怎么做！

我的要求是这样的： 假设有一个div元素，大小为200x200，背景颜色为黑色。 还有另一个div元素，背景颜色为红色。 也许还有另一个，背景颜色为绿色。

它们沿着屏幕中心垂直放置。一个在另一个下面。 当我悬停在其中一个上时，其他两个将从右向左移动。 而光标所悬停的那个则会保持不动。 你猜怎么做？

- Jayant Bhawal

---

你有尝试过任何现有的代码吗？ - display-name-is-missing

CSS中没有向后选择器，您可能需要使用JavaScript来实现此功能。 - Hashem Qolami

@HashemQolami 或许可以使用 first-child，或者 nth-child，如果它总是在容器中的固定位置。 - crush

这里放一些示例HTML会很不错。 - crush

Answer 1

这是一个纯CSS解决方案，可以让您了解如何实现您想要的效果。 HTML

<span id="boss">hover here</span>
<div id="move_me"></div>

CSS

#move_me {

    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
    background:#00f; 
    width:100px; 
    height:100px;
    z-index:1;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}


#boss {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:70px;
    margin-left:-50px;
    width:100px;
    height:100px;
    z-index:2;
    background:#ddd;
}


#boss:hover + div {
    left:10%;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}

DEMO

- display-name-is-missing

Answer 2

这里可以使用.container:hover并将其与:not(:hover)结合使用。 演示

.container:hover .wrapper:not(:hover) .block {
    margin-left: -400px;
}

- brouxhaha

Answer 3

我已经做出了一个解决方案，但它需要主容器的恒定宽度。在我的fiddle中，主容器是#blocks，宽度为475px：

Fiddle

HTML

<center>
<div id="blocks">
    <div class="innerDiv">
        <div class="block red"></div>
        <div class="block blue"></div>
        <div class="block green"></div>
    </div>
</div>
</center>

CSS

#blocks{
    width:475px;
    height:150px;
    border:1px solid black;
}
.innerDiv{
    width:50px;
    height:150px;
    margin:0px auto;
}
.innerDiv:hover{
    margin-left:0px;
}
.block{
    width:50px;
    height:50px;
}
.block:hover{
    margin-left:213px;
}
.red{
    background-color:red;
}
.blue{
    background-color:blue;
}
.green{
    background-color:green;
}

- Zword

Answer 4

常规兄弟组合器是一个稍微更加灵活的选项Pen

<span id="boss">hover here</span>
<div id="seperator"></div>
<div id="sum">
    <div id="move_me"></div>
</div>

CSS

#move_me {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
    background:#00f; 
    width:100px; 
    height:100px;
    z-index:1;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}
#boss {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:70px;
    margin-left:-50px;
    width:100px;
    height:100px;
    z-index:2;
    background:#ddd;
}

#boss:hover ~ #sum #move_me {
    left:10%;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}

- Mrsonord