<a> link doesn&#39;t go a way

Question

I want the words of my link to be red and the underline to show up only when it's hovered, and this is my code:

a:hover div {
  text-decoration: underline;
}
a div{
  color: red;
  text-decoration: none;
}

<a href="">
  <div>next page</div>
</a>

Now the color of the text is red but the underline doesn't disappear. Why?

Answer 1

试试这个，只需为text-decoration:none设置a tag。

a{
  color: red;
  text-decoration: none;
 }

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

＆＃13;

＆＃13;

a:hover div {
        text-decoration: underline;
    }
a{
        color: red;
        text-decoration: none;
  }

＆＃13;

 <a href="">
        <div>next page</div>
 </a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您不能在内联项（div）中包含块级项（a）。因此，尚不支持它的浏览器可能会将div从a中删除。相反，使用span并向display: block提供a，同时block或inline-block中有a { color: red; text-decoration: none; } a:hover div { text-decoration: underline; }。

但对于支持此行为的浏览器，您的解决方案将在以下代码段中填写：

＆＃13;

＆＃13;

<a href="">
  <div>next page</div>
</a>

＆＃13;

Math.abs(mMatrixValues[Matrix.MSCALE_X]);

＆＃13;

＆＃13;

＆＃13;

Answer 3

下划线不是由于div中的样式。这是a标签的默认样式。删除css选择器中的div部分：

a:hover {
    text-decoration: underline;
}
a {
    color: red;
    text-decoration: none;
}

<a href="">
    <div>next page</div>
</a>