Как добавить псевдокласс через jQuery?

Question

[khomaldi]

Есть код

HTML

<div class="image-container">
      <div class="image-div">
        <img class="image" src="https://site/img/001.jpg" title="Андрей">
      </div>
      <div class="name">
        <p>Андрей</p>
      </div>
</div>

И есть код

CSS

.image-container .image {
  transform: scale(1.1);
  filter: grayscale(0%);
}

Как с помощью jQuery сделать так: при клике на <div class="image-container"> в CSS к .image-container добавлялся :hover. То есть чтобы вышло так .image-container:hover .image {}

Comments

[holfza]

Да вы, батенька, извращенец

[Ankhena]

Вы по-русски объясните какого эффекта нужно достичь, что должно произойти при клике на div и зачем?

[alex]

Георгий Хомалдишвили ты походу даже не осознаешь какую хрень пытаешься сделать

Answer 1

[Ankhena]

Кажется я поняла, что вы хотите, так: https://jsfiddle.net/e3auf6h7/ ?
Если нужен еще и hover, то его просто в стилях пишете.
Если нужно, чтобы при клике не "гасли"остальные картинки, то уберите строчку про remove.

Comments

[khomaldi]

Ankhena большое спасибо!

[khomaldi]

Ankhena под touch устройства будет работать click(function() ?

[Ankhena]

Георгий Хомалдишвили, вы можете использовать отдельно touch-события
https://webfanat.com/article_id/?id=160

[khomaldi]

Ankhena, всё работает так, как я и хотел. Большое спасибо!

Answer 2

[Beliyadm]

Никак, это псевдоэлемент у блока, он и так по умолчанию существует.
Вы можете ранее его в стилях создать и скрыть а по клику добавить класс и по новому классу показать

.image-container:before {бла бла бла display: block;}

$('.image-container').addClass('.showpsevdo');
и в стилях

.image-container.showpsevdo:before {display: block;}