How to animate the div instead of the content

Question

I have a hover animation that'll I'd like to animate the div with, but when I added the animation to #i :hover {}, it animates the words instead, plus the cursor only turns into a pointer when hovering the words instead of the div.

@keyframes hover {
  0% {bottom: 0px;}
  100% {bottom: 20px;}
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

#i {
    transition: 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 100, 0);
    width: 200px;
    height: 200px;
    font-size: 50px;
    text-align: center;
    font-family: sans-serif;
    border-radius: 10%;
}

#i :hover {
    position: relative;
    cursor: pointer;
    animation: hover 0.5s;
    bottom: 20px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div id="i"><strong>Hover</strong></div>
  </body>
</html>

How do I change it so that the entire div would raise up instead?

Remove the space between the #i and :hover you should have it as `#i:hover` not like `#i :hover`. The space between the `#i` and the `:hover` indicates that you want to animate the children on hover. — KodeFor.Me, Apr 18 '22 at 09:09

score 1 · Answer 1 · answered Apr 18 '22 at 09:08

In CSS, spaces matter

@keyframes hover {
  0% {bottom: 0px;}
  100% {bottom: 20px;}
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

#i {
    transition: 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 100, 0);
    width: 200px;
    height: 200px;
    font-size: 50px;
    text-align: center;
    font-family: sans-serif;
    border-radius: 10%;
}
 
#i:hover {
    position: relative;
    cursor: pointer;
    animation: hover 0.5s;
    bottom: 20px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div id="i"><strong>Hover</strong></div>
  </body>
</html>

score 1 · Accepted Answer · answered Apr 18 '22 at 09:09

1

You put a space between #i and :hover this code applies when an element which is a child of #i is hovered. You can fix this by removing the space.

#i:hover {
    position: relative;
    cursor: pointer;
    animation: hover 0.5s;
    bottom: 20px;
}

answered Apr 18 '22 at 09:09

Casper Kuethe

1,070
8
13

How to animate the div instead of the content

2 Answers2