Манипуляции с псевдоэлементами
У меня есть этот ДОМ
<div class = "slotvideo">
<div class = "posterimage"></div>
</div>
Я не могу изменить этот html-код, но мне нужно добавить значок SVG. Этот SVG используется для функции. При нажатии мне нужно добраться до нижней части страницы. Я создаю этот CSS
.posterimage::before {
content: "";
background-image: mysvg;
}
Теперь я не могу манипулировать псевдоэлементом, но я не могу найти другого решения для этого. Как бы вы могли решить эту проблему?
наверное это: stackoverflow.com/questions/5041494/…
Я немного не понимаю, в чем ваша проблема. вам нужно добавить псевдоэлемент и вы хотите прикрепить обработчик событий к щелчку этого псевдоэлемента? в таком случае невозможно использовать прослушиватели событий для псевдоэлементов. Самое близкое, что вы можете сделать, - это сделать какое-то хакерское обнаружение указателя мыши, чтобы определить, находится ли мышь «над» псевдоэлементом при щелчке по базовому элементу.
@TNguyen, если вы хотите прослушивать только один псевдоэлемент событий мыши, а не его родительские события, тогда вы можете обмануть его правилом событий указателя: jsfiddle.net/vcxw8f5q Но это снова ближе к взлому, чем что-либо еще, и требует много условий для работы ...
попробуйте background-image: url(yourSvgPath) , или вы можете просто поместить элемент <svg> во внешний div, а затем использовать position: absolute для решения проблемы стиля.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я не мог найти то, что тебе на самом деле нужно. но насчет манипулирования псевдоэлементы это невозможно. Но есть обходной путь.
Вы можете определить другое имя класса, например .active, изменить на него класс элемента для управления псевдоэлементом.
.posterimage {
/* anything... */
}
.posterimage.active::before {
content: "";
background-image: mysvg;
}
не забывайте, псевдоэлементы по умолчанию встроены, поэтому, если вы хотите, чтобы это фоновое изображение отображалось, вам нужно сделать его display: block и определить набор width и height.
и дело сделано. вы можете использовать этот класс .active, чтобы контролировать отображение ::before или нет с помощью JavaScript.
Это должен быть
.posterimage, а не. posterimage.