时间戳

首页 > 解决方案 > 当链接中包含元素时，单击 css 更改链接的背景颜色

html - 当链接中包含元素时，单击 css 更改链接的背景颜色

问题描述

你好我有以下代码

<div class="nhsuk-grid-column-one-third" data-test="recent-update">
     <div class="nhsuk-card nhsuk-card--clickable">
          <a class="nhsuk-card__link" href="{{ fullUpdateLink(0) }}" data-test="full-update-link-0">
            <div class="nhsuk-card__content">
                            <span class="nhsuk-caption-m nhsuk-caption--bottom">{{ updates[0].date }}</span>
                            <h3 class="nhsuk-card__heading">{{ updates[0].title }}</h3>
                            <p class="nhsuk-card__description">{{ updates[0].landingPageContent | safe }}</p>
             </div>
        </a>
  </div>

我想在用css点击它时将链接背景更改为黄色。我尝试了以下css，但它不起作用：

.nhsuk-card__link a:active {
   background-color: #ffeb3b !important;
}

我认为这是因为标签内的元素，我尝试不使用 div/span/h3/p 元素，只输入“你好”这个词就可以了。

标签： htmlcss

解决方案

仅当操作当前处于“活动状态”时才会活动。例如，它非常适合单击并按住一个按钮以使其外观更具触感，但是一旦您松开单击，更改就会恢复。:active 不会监听点击并在活动状态结束时保留更改。不幸的是，它只是不能那样工作。

您最好的选择是使用带有 JS 的事件侦听器来添加/更改点击时的 div 类。如果您以前没有使用过 JS，这可能是一个很好的做法，因为您只需几行代码即可完成。本教程可以引导您完成：https ://www.youtube.com/watch?v=jznWWxPZkvQ

推荐阅读