找到你要的答案

Q:Set text-decoration underline on hover effect

Q:设置文本装饰下划线悬停效果

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

我有一个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;
}
answer1: 回答1:

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

。COL元素没有任何的后代,所以选择简单的失败!你应该删除有关的部分。

answer2: 回答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>

检查您更新的代码:

.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>
answer3: 回答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;
}

你把CSS不是页面中的标记匹配,所以解决方法就是重写你的CSS去除失踪约的标记元素。

.col ul li a:hover
{
   text-decoration: underline;
}
answer4: 回答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.

你只需要引用类的“关口”,那么“一”的标签。

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

请注意您也可以使用:活动,链接:悬停:访问,您将不得不适当地选择这些样式。

html  css