Блог

Главная - Вопросы по программированию - Измените цвет фона ссылки при нажатии с помощью css, если внутри нее есть элементы

Измените цвет фона ссылки при нажатии с помощью 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 и просто вставил слово «привет», и это работает с этим.

Комментарии:

1. font В CSS нет никакого свойства.

2. Если вы хотите изменить цвет фона font , это неправильный способ сделать это.

3. также вам понадобится :visited селектор. Лучше использовать JS и добавлять класс при нажатии.

4. Весьма тревожно видеть классы nhsuk в этом, учитывая количество ложных веб-сайтов, появившихся в последнее время. Тем более, что живой сайт использует их, и я думаю, что у любого, кто работает на этом сайте, будет достаточно знаний, чтобы знать, как изменить цвет фона

5. мой плохой я имел в виду цвет фона вместо шрифта @tacoshy, который я попытался использовать:посетил, однако не повезло. Я не могу использовать js, к сожалению, я ограничен

Ответ №1:

Активен будет только до тех пор, пока действие в данный момент «активно». он отлично подходит, например, для нажатия и удержания кнопки, чтобы придать ей более тактильный вид, но изменения вернутся, как только вы отпустите кнопку. :active не будет слушать щелчок и сохранять изменения, когда активное состояние закончится. К сожалению, это просто не работает таким образом.

Лучше всего использовать прослушиватель событий с JS для добавления/изменения класса div при кликах. Если вы раньше не использовали JS, это может быть отличной практикой, так как вы можете сделать это всего с помощью нескольких строк кода. Этот учебник может помочь вам в этом: https://www.youtube.com/watch?v=jznWWxPZkvQ

Метки: ,