Как запустить действуюште CSS стили по нажатию на ссылку в навигации?

Question

[bgood]

подскажите, пожалуйста, как запустить отработу стилей CSS по нажатию на id в навигационном баре
в скрипте уже есть настроиный ряд стилей, которые запускаются при hover, но я хочу еще запускать эти же стили и по нажатию на id в нав баре

<div id="about_me"> 
                    <div class="about_me_mob">         
                            <img class="vero_photo" src="images/photo_2021-10-21_21-41-32.jpg" alt="вероніка">                        
                        <div class="about_me_text">
                            <h4 class="hi">текст </h4>
                        </div>
                    </div>
                </div>

для мобильного отображения я настроил стиль:

#about_me {
    margin-top: 30px;
    position: relative;
  }
  .about_me_text {
    width: 100%;
    height: 100%;
    padding: 20px;
    font-size: 23px;
    position: absolute;
    color: rgb(255, 239, 223);
    transform: translateX(30px);
    transition: 0.6s;
    opacity: 0;
    z-index: 1;
  }
  .vero_photo {
    width: 100%;
    opacity: 1;
    transition: 0.6s;
    margin: 10px 0;
    padding: 0 10px;
  }
  .about_me_mob {
    position: relative;
    display: flex;
    cursor: pointer;
  }
  .about_me_mob:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.384);
    transition: 0.6s;
    opacity: 0;
    border-radius: 50px;
    z-index: 1;
    content: "";
  }
  .about_me_mob:hover .vero_photo {
    transform: scale(1.05);
  }
  .about_me_mob:hover:before {
    opacity: 1;
  }
  .about_me_text:hover,{
    transform: translateX(0);
    opacity: 1;
  }

и вот хочу что бы это же действие выполнялось и по переходу по #about_me

Answer 1

[Вадим]

https://developer.mozilla.org/ru/docs/Web/CSS/:target

Comments

[bgood]

спасибо, но как это применяемо в моем случае?

[Вадим]

bgood, Вы хотите чтобы по нажатию на ссылку, которая ведёт на #about_me, к элементам применялись те же стили что и их ховер варианты, такие как about_me_mob:hover, about_me_text:hover так?

[bgood]

Вадим, да, все верно

[Вадим]

bgood, Так, и что Вам тогда не понятно\в чём вопрос? Вы открыли ссылку, прочитали? Посмотрели примеры в середине и в конце статьи?

[bgood]

Вадим, при этом мне и :hover нужно оставить

[Вадим]

bgood, Хорошо, вопрос в чём? Вы не знаете как комбинировать селекторы? Вы не знаете как написать ещё один селектор?

[bgood]

Вадим, я не понимаю как привязать клик по ссылке к выполнению тех :hover но при этом и оставить условия данных :hover
или вы имеете в виду написать еще те-же условия стиля и для #about_us:target ?

[Вадим]

Напишите нужный селектор и через запятую с ховером.
Например:

// Было .about_me_text:hover {}, стало:

#about_me:target .about_me_text, .about_me_text:hover {
    transform: translateX(0);
    opacity: 1;
}

[bgood]

Вадим, извините, но эффекта нет, к сожалению

#about_me:before,
  .about_me_mob:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.384);
    transition: 0.6s;
    opacity: 0;
    border-radius: 50px;
    z-index: 1;
    content: "";
  }
  #about_me:target.vero_photo,
  .about_me_mob:hover .vero_photo {
    transform: scale(1.05);
  }
  #about_me:target:before,
  .about_me_mob:hover:before {
    opacity: 1;
  }
  #about_me:target.about_me_text,
  .about_me_text:hover {
    transform: translateX(0);
    opacity: 1;
  }

<div id="about_me"> 
                    <div class="about_me_mob">         
                            <img class="vero_photo" src="images/photo_2021-10-21_21-41-32.jpg" alt="вероніка">                        
                        <div class="about_me_text">
                            <h4>Текст</h4>
                        </div>
                    </div>
                </div>

[Вадим]

bgood, #about_me:target.vero_photo и где у Вас такой элемент в разметке?
#about_me:target.vero_photo - такого нет.
#about_me:target .vero_photo - такой есть.