锚标签在悬停css上不起作用答案

【问题标题】：Anchor tag not working on hover css锚标签在悬停css上不起作用
【发布时间】：2014-11-21 06:33:14
【问题描述】：

我遇到了这个奇怪的问题，由于某种原因，我的锚标记在悬停或活动状态下不起作用。

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

subheaders a:link 类只有效，hover 和 active 无效。

【问题讨论】：

您的 html 无效。
<a href="" /> 关闭没有任何内容的链接元素。
也遵循 LVHA 顺序：stackoverflow.com/questions/25620839/…

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

删除/

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

还要检查 CSS 中的其他样式是否存在冲突。

【讨论】：

【解决方案3】：

添加！重要；

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

【讨论】：

【解决方案4】：

您的 a 标签用一个/，只用一个

【讨论】：

【解决方案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>

【讨论】：