如何为 div 而不是内容设置动画

Question

我有一个悬停动画，我想用它来为 div 设置动画，但是当我将动画添加到 #i :hover {} 时，它会改为为文字添加动画，仅加上光标将鼠标悬停在单词而不是 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>

我如何更改它以便整个 div 会升起？

Answer 1

在 CSS 中，空格很重要

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

Answer 2

您在 #i 和 :hover 之间放置了一个 space 此代码适用于悬停 #i 的子元素时。您可以通过删除 space.

来解决此问题

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

如何为 div 而不是内容设置动画

How to animate the div instead of the content

html

css

css-animations