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

I have a html

我有一个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>

I want the a href to get underlined when hovered.

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

I have used this css, but still it isn't happening.

我使用过这个css,但它仍然没有发生。

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

4 个解决方案

#1

.col element doesn't have any .about descendants, so the selector simply fails! You should remove the .about part.

.col元素没有任何.about后代,所以选择器只是失败了!你应该删除.about部分。

#2

Check following you updated code:

检查以下更新的代码:

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

#3

The css you pasted is not matching the markup in the page, so the solution to this is to rewrite your css by removing the missing markup element .about

您粘贴的CSS与页面中的标记不匹配,因此解决此问题的方法是通过删除丢失的标记元素来重写您的css。

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

#4

You only need to reference the class "col", then the "a" tag.

您只需要引用类“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/ Set your link preferences before hover, then set the preferences for hover, as shown in the example.

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

Please be aware you can also use :active, :link, :hover, :visited, and you will have to style these appropriately.

请注意,您还可以使用:active,:link,:hover,:visited,您必须适当地设置这些样式。

#1