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

你只需要引用课程＆＃34; col＆＃34;，然后是＆＃34; a＆＃34;标签

＆＃13;

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

＆＃13;

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

＆＃13;

https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-SlidingTabLayout 在悬停之前设置链接首选项，然后设置悬停的首选项，如示例所示。

请注意，你也可以使用：active，：link，：hover，：visited，你必须适当地设置这些样式。

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

4 个答案: