我知道这个问题已经被问了几次，但没有一个答案是非常清楚的，我写了一些基本的代码，如果有人能解决的代码，并解释为什么会发生这个问题，这将是非常感谢.问题是.hover动画被取消时，位置被设置为绝对的页脚.
https://codepen.io/HamHat/pen/zpemYz
下面是供将来使用的代码，这似乎是一个常见的问题。
超文本标记语言：

<footer>
  <ul>
      <li><a href="#about">About Us</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#privacy">Privacy</a></li>
  </ul>
      <div class="bear">
      <a href="google.com"><img src="https://placebear.com/g/80/80"></a>
    </div>
</footer>

字符串
CSS：

footer{
  display: flex;
  position: absolute;
  justify-content: center;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: red;
}

ul{
  display: flex;
  list-style-type: none;
  border-radius: 5px;
}

li a{
  color: black;
  display: inline-block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover{
  background-color: white;
}

.bear {
  width: 100%;
  position: absolute;
  text-align: right;
}

型