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

Question

I have a 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.

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

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

Answer 1

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

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

Answer 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

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

Answer 4

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

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

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