html - 位置是绝对时，下划线功能不起作用？

Question

所以我有一些 div，当它们悬停在上面时我想加下划线，但它不起作用......我认为这是因为位置设置为绝对位置但我需要它像那样吗？请帮我!谢谢。

#alltext {
  font-family: Calibri;
  font-size: 40px;
}
#Home {
  position: absolute;
  left: 550px;
  top: 30px;
}
#Products {
  position: absolute;
  left: 760px;
  top: 30px;
}
#Contact {
  position: absolute;
  left: 1020px;
  top: 30px;
}
a {
  color: white;
}
a:hover {
  text-decoration: underline;
}

<div id="alltext">
  <a href="index.html">
    <div id="Home">Home</div>
  </a>
  <a href="products.html">
    <div id="Products">Products</div>
  </a>
  <a href="contact.html">
    <div id="Contact">Contact</div>
  </a>
</div>

Answer 1

如下修改您的 CSS。

a:hover div {
  text-decoration: underline;
}