在悬停效果上设置文本装饰下划线

Question

我有一个HTML

<div class="col store">
 <h4>POLICIES</h4>
  <ul>
     <li><a href="#">Shipping Policies</a></li>
     <li><a href="#">Return Policy</a></li>
     <li><a href="#">Privacy Policy</a></li>
     <li><a href="#">Terms of Use</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">How To Shop</a></li>
  </ul>
</div>

我希望将href悬停时加下划线。

我已经使用过此CSS，但仍然没有发生。

.col .about ul li a:hover
{
   text-decoration: underline;
}

Answer 1

.col元素没有任何.about后代，因此选择器只会失败！ 您应该删除.about部分。

Answer 2

检查以下更新的代码：

 .col ul li a:hover { text-decoration: underline; } .col ul li a{ text-decoration: none; } 

 <div class="col store"> <h4>POLICIES</h4> <ul> <li><a href="#">Shipping Policies</a></li> <li><a href="#">Return Policy</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms of Use</a></li> <li><a href="#">Blog</a></li> <li><a href="#">How To Shop</a></li> </ul> </div> 

Answer 3

您粘贴的css与页面中的标记不匹配，因此解决方案是通过删除缺少的标记元素.about来重写css。

.col ul li a:hover
{
   text-decoration: underline;
}

Answer 4

您只需要引用类“ col”，然后引用“ a”标签。

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

 <div class="col store"> <h4>POLICIES</h4> <ul> <li><a href="#">Shipping Policies</a></li> <li><a href="#">Return Policy</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms of Use</a></li> <li><a href="#">Blog</a></li> <li><a href="#">How To Shop</a></li> </ul> </div> 

http://jsfiddle.net/ofsmnp8y/在悬停之前设置链接首选项，然后为悬停设置首选项，如示例所示。

请注意，您也可以使用：active，：link，：hover，：visited，并且必须适当设置样式。