Question

我在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。您可以在我的网站上查看食物类型。

Answer 1

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

<item name="android:colorButtonNormal">@color/button_color</item>

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

现在你只需要在你的css中设置这个样式

<Button
       android:id="@+id/add_remove_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:backgroundTint="@color/bg_remove_btn_default"
       android:textColor="@android:color/white"
       tools:text="Remove" />

Answer 2

wordpress总是在其当前所选项目中添加一个类。

current-menu-item

所以你可以像

一样使用它

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

Answer 3

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

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

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

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

为了设置相应链接的样式，您需要将:visited规则放在所有其他与链接相关的规则之后，如:active所定义：{{ 1}}。

注意：在具有多按钮鼠标的系统上，CSS 3指定了 LVHA-order伪类只能应用于主要按钮;上右手老鼠，这通常是最左边的按钮。

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

3 个答案: