Question

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

<!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>

Answer 1

使用子>选择器作为+用于兄弟姐妹：

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

Demo

Answer 2

使用子选择器（＆gt;）而不是兄弟选择器（+）

<强> DEMO HERE

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

Css：当鼠标在父级上时移动子级

2 个答案: