CSS悬停和位置：绝对不起作用

Question

我知道这个问题已经被问过几次了，但没有一个答案非常清楚，我已经编写了一些基本代码，如果有人可以解决代码并解释为什么会发生这个问题，我将不胜感激。问题是当页脚上的位置设置为绝对时，

.hover

动画被取消。

https://codepen.io/HamHat/pen/zpemYz

这是供将来使用的代码，这似乎是一个常见问题。

HTML：

<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;
}

Answer 1

熊图像宽度为 100%，这就是它不起作用的原因

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;
}

a:hover{
  background-color: white;
}

.bear {
  width : 10%;
  position: absolute;
  right:0;
}

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