CSS：如何在<a>链接上切换开关动作？

我知道在css按信号是:active，但我仍然无法找到一个适当的方式来做链接切换开关。CSS：如何在<a>链接上切换开关动作？

例如，<a>具有蓝色，当第一次按下<a>时，它的颜色应该是红色，当它第二次按下时，它的颜色应该再次变为蓝色。所以基本上第一次按是从蓝色切换到红色，第二次反之亦然。

我已经使用:target作用，这似乎没有工作了：

a { 
    color: blue; 
} 
a:active { 
    color: red; 
} 
a:target { 
    color: red; 
}

怎么会这样可能不使用JS的？所以我可以在第一次点击时切换链接颜色为红色，然后在第二次点击蓝色。

来源

2016-07-15 ShellRox

这是不可能实现没有JS。链接不被设计为切换元素，并且CSS无法追踪元素上的多次点击（无论是单击还是不点击）。

如果您想表示切换，请查看复选框输入。他们有一个:checked pseudo-class。

来源

2016-07-15 08:40:59 Quentin

你好，这将解决这个问题，但风格的似乎并不用''元的工作，我怎么可能使它看起来像一个正常的段落文本？ – ShellRox

在相关联的''之后设置''。 – Quentin

你可以通过复选框和标签来完成。

HTML：

<input type="checkbox" id="t1" class="toggle"> 
<a href="#"><label for="t1">Link with toggling color</label></a>

CSS：

.toggle { 
    position: absolute; 
    left: -99em; 
} 

.toggle:not(:checked) + a { 
    color: blue; 
} 

.toggle:checked + a { 
    color: red; 
}

工作实例here。

来源

2016-07-15 08:55:19

有一种方法可以（纯粹用CSS实现），但这意味着在初始状态下链接实际上是不可点击的，这可能不是可取的。

诀窍是定位标记的pointer-events设置为none，具有tabindex属性包装在另一元件（以允许它获得焦点），然后，当缠绕元件接收焦点，更改的颜色锚定并重置其pointer-events。在下一次点击时，链接将获得焦点，但是这将从包裹元素中移除焦点，这会将锚点的样式恢复到其初始状态。

*{color:#000;font-family:sans-serif;outline:0;} 
 
a{ 
 
    color:#00f; 
 
    pointer-events:none; 
 
} 
 
span:focus>a{ 
 
    color:#f00; 
 
    pointer-events:initial; 
 
}

<span tabindex="-1"><a href="#">link</a></span>

来源

2016-07-15 08:57:01 Shaggy

CSS：如何在<a>链接上切换开关动作？

回答

相关问题