CODEWITHSUNDEEP
css
Matt Martin
Matt Martin

Reputation: 855

Css: Move child when mouse is on parent

I've started with css just day ago so I'm new to this.I'd like to achieve moving blue rectangle when I move mouse on red rectangle.I'm sure hover is able to handle this event, but I don't really know how to work with parent/child relationship.Thank you.

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

Upvotes: 0

Views: 48

Answers (2)

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

Use child > selector as + is for siblings:

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

Demo

Upvotes: 2

Love Trivedi
Love Trivedi

Reputation: 4046

Use the child selecter (>) not sibling selector (+)

DEMO HERE

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

Upvotes: 0

Related Questions