Инициировать события с помощью JQuery на CSS3: после псевдоэлемента?

Question

У меня есть этот CSS

#popup .title:hover:after {
    content: "hide";
    position: absolute;
    top: 3px;
    right: -32px;
    background: orange;
    padding: 2px 4px;
    font-size: 10px;
    border-radius: 4px;
}

, и я хотел использовать событие щелчка по нему для .remove() the <div id="#popup"> Но:

$('#popup .title:hover:after').length

возвращает 0 в готовом документе..

Есть ли способ сделать это?

Answer 1

Есть ли способ?

Извините, нет.Псевдоэлементы, созданные с помощью :after (или :before, или эквивалентов CSS 3 ::after и ::before), не являются частью DOM и поэтому не могут быть выбраны.

Из Спецификация CSS 2.1 :

Созданный контент не изменяет дерево документа.В частности, он не возвращается обратно процессору языка документа (например, для повторного анализа).

Answer 2

К сожалению, псевдо элементы не в дом.Так что ваш браузер не сможет их видеть :(

Поскольку вы хотите, чтобы они загружались после загрузки страницы или читали css, я бы сделал это с помощью javascript, используя after:

 $('#popup .title').after(); (you'll need to ploop your code in still)

и теперь, когда это было добавлено, я могу поиграть с ним с помощью JavaScript, удалить и т. Д. И т. Д.