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

Question

所以我有一些div，当他们被徘徊时我想强调，但它不起作用......我认为这是因为这个位置是绝对的，但我需要它是那样的吗？请帮我！三江源。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

修改您的CSS，如下所示。

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

Answer 2

将ID提供给<a>而不是<div>，它可以根据您的需要http://jsfiddle.net/2kh7bof7/

<a href="products.html" id="Products">
<div >Products</div>
</a>