单击链接时，活动链接颜色不会更改答案

【问题标题】：Active link color is not changed when click on link单击链接时，活动链接颜色不会更改
【发布时间】：2015-05-05 06:37:30
【问题描述】：

我正在使用 WordPress。我从数据库中获取了多个数据并将它们放入锚标记中。当我点击链接时，它的颜色不会改变，所以我无法识别哪个链接是活动的？

我的 CSS 是：

.cd-popup-trigger:active {
    color: #000;
}

而我的代码是这样的：

<a href="0#" class="cd-popup-trigger" id="cd-popup-trigger_<?php echo $trow->ID; ?>">
     <span class="tooltip-home-item" title="<?php echo  get_post_meta( $trow->ID, 'wpcf-short-description', true );?>">
          <img src="<?php echo $url; ?>" alt="<?php echo $trow->post_title; ?>" width="20px" height="20px" />
          <label for="<?php echo $trow->post_name; ?>">
              <?php echo $trow->post_title; ?>
          </label>
     </span>
</a>

此外，我使用 jQuery 在单击时显示一个弹出框。而且我在鼠标悬停时使用了工具提示。我的网站是here，如果您想查看的话。您可以在我网站上的食物类型下查看。

【问题讨论】：

标签： jquery html css wordpress

【解决方案1】：

现在您正在将 css 添加到您的活动状态，并且它正在工作。但是如果你想添加样式，即使点击后它仍然存在，那么你将不得不通过 jQuery 添加一个类。

jQuery('.cd-popup-trigger').click(function(){
     jQuery('.cd-popup-trigger').removeClass('active');
     jQuery(this).addClass('active');

});

我没有测试过，但它应该做的是在“cd-popup-trigger”旁边分配一个类，当你点击其他元素时，它会删除前一个并将其分配给新元素。

现在你只需要在你的 CSS 中设置样式

.cd-popup-trigger.active label {
    color: red;
}

【讨论】：

【解决方案2】：

wordpress 总是将一个类添加到其当前选定的项目中。

current-menu-item

所以你可以像这样使用它

.current-menu-item {
    color: #000;
}

【讨论】：

我已经添加了这个类，但它不起作用。当我关闭弹出窗口时，我无法识别最后哪个链接处于活动状态？
@parth 我找不到您在给定链接中添加的 css
当我使用它时，我的所有列表都以黑色显示。

【解决方案3】：

CSS pseudo-class 是添加到选择器的关键字，用于指定要选择的元素的特殊状态。例如:hover 将在用户将鼠标悬停在选择器指定的元素上时应用样式。

伪类与伪元素一起，让您将样式应用于元素，不仅与文档树的内容相关，还与导航器历史等外部因素相关（:visited ，例如）、其内容的状态（例如某些表单元素上的:checked）或鼠标的位置（例如:hover，它可以让您知道鼠标是否在某个元素上）。

:active CSS 伪类在用户激活元素时匹配。它允许页面给出浏览器检测到激活的反馈。与鼠标交互时，这通常是用户按下鼠标按钮和释放鼠标按钮之间的时间。 :active 伪类也通常在使用键盘 Tab 键时匹配。它经常用于<a> 和<button> HTML 元素，但可能不仅限于这些元素。

此样式可能会被任何其他与链接相关的伪类覆盖，即:link、:hover 和:visited，出现在后续规则中。

为了设置适当链接的样式，您需要将:active 规则放在所有其他与链接相关的规则之后，如LVHA-order 所定义：:link — :visited — :hover — :active。 p>

注意：在带有多按钮鼠标的系统上，CSS 3 指定 :active 伪类必须只适用于 primary 按钮；在惯用右手的鼠标，这通常是最左边的按钮。

【讨论】：