css - Css：当鼠标在父项上时移动子项

Question

我刚开始使用css，所以我是新手。当我在红色矩形上移动鼠标时，我想实现移动蓝色矩形。我确信悬停能够处理这个事件，但我没有t 真的知道如何处理父母/孩子的关系。谢谢。

<!DOCTYPE html>
<html>
<head>
</head>

<body>
    <style>
    #first
    {
        width:50px;
        height:50px;
        position: relative;
        top:100px;
        left:100px;
        background: red;
    }

    #second
    {
        width:50px;
        height:50px;
        position: relative;
        top:200px;
        left:200px;
        background: blue;
        transition: left 1s;
    }

    #first:hover + #second
    {
        left:250px;
    }
    </style>
    <div id="first">
        <div id="second"></div>
    </div>
</body>
    </html>

score 2 · Accepted Answer

对兄弟姐妹使用子>选择器+：

   #first:hover > #second
   {
     left:250px;
   }

演示

score 0 · Accepted Answer

使用子选择器 (>) 而不是兄弟选择器 (+)

在这里演示

#first:hover > #second
    {
        left:250px;
    }

css - Css：当鼠标在父项上时移动子项

2 回答 2

Related

Reference