Question

我一直试图通过将鼠标悬停在另一个div元素上来使一个元素从一个点移动到另一个点。但我无法弄清楚如何！

我想要的是：假设有一个div元素，200x200和背景颜色：黑色。还有另一种，但背景颜色：红色。如果是另一个，背景颜色：绿色。

它们垂直放置在中心或屏幕上。一个在另一个之下。当我将鼠标悬停在其中一个上时，另外两个将从右向左移动。当光标悬停在其上时，将保持静止。任何猜测如何做到这一点？

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

Answer 2

您可以在此使用.container:hover并将其与:not(:hover)结合使用。

<强> DEMO

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

Answer 3

我已经提出了一个解决方案，但它需要一个恒定宽度的主容器。在我的小提琴中，主容器是#blocks width: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;
}

Answer 4

General sibling combinator是一个稍微灵活的选项 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;
}

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

4 个答案:

Fiddle