Question

我遇到这个奇怪的问题，由于某种原因，我的锚标签在悬停或活动状态下无效。

<span class="subHeaders">
 <a href="" />First </a>
</span>

<span class="subHeaders">
 <a href="" />Second </a>
</span>

<span class="subHeaders">
 <a href="" />third </a>
 </span>


 // css
 .subHeaders a:link {
  text-decoration: none;
 }

.subHeaders a:active {
  color: yellow;
}
.subHeaders a:hover{
   cursor: pointer;
   color: red;
 }

子标题a：链接类仅起作用，悬停和活动不起作用。

Answer 1

您使用的<a/></a> HTML中存在错误，您应该使用<a></a>。使用此：

<span class="subHeaders">
 <a href="" >First </a>
</span>

<span class="subHeaders">
 <a href="" >Second </a>
</span>

<span class="subHeaders">
 <a href="" >third </a>
 </span>

Answer 2

删除/

<span class="subHeaders">
    <a href="">third </a>
</span>

同时检查CSS中没有其他样式存在冲突。

Answer 3

添加！important;

<span class="subHeaders">
     <a href="" />First </a>
    </span>

    <span class="subHeaders">
     <a href="" />Second </a>
    </span>

    <span class="subHeaders">
     <a href="" />third </a>
     </span>

     .subHeaders a:link {
      text-decoration: none;
     }

    .subHeaders a:active {
      color: yellow !important;
    }
    .subHeaders a:hover{
       cursor: pointer;
       color: red !important;
     }

Answer 4

您的标签已关闭 a /，仅使用

Answer 5

您不需要像这样关闭锚标记的第一部分。

以下是您的最新动态：http://jsfiddle.net/tyhzh8gt/1/

<span class="subHeaders">
  <a href="" >First </a>
</span>

<span class="subHeaders">
  <a href="" >Second </a>
</span>

<span class="subHeaders">
  <a href="" >third </a>
</span>

锚标签不在悬停css上工作

5 个答案: