Всем привет.
Подскажите пожалуйста, есть ли в Jquery селектор для обращения к элементам с псевдоклассом "after"?
Или как можно обратиться к такому элементу, чтобы поменяться CSS-свойство?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВсем привет.
Подскажите пожалуйста, есть ли в Jquery селектор для обращения к элементам с псевдоклассом "after"?
Или как можно обратиться к такому элементу, чтобы поменяться CSS-свойство?
Напрямую к псевдоэлементу обратиться нельзя, но можно изменять его свойства добавляя тот, или иной CSS-класс к основному элементу:
HTML:
<div id="pnlTest"></div>
CSS
#pnlTest
{
width: 50px; height: 50px;
background-color: black
}
#pnlTest:after
{
width: 25px;
height: 25px;
background-color: green;
display: block;
content: '';
}
#pnlTest.red:after
{
background-color: red;
}
JS
$('#pnlTest').hover(function() {
$(this).addClass('red')
}, function() {
$(this).removeClass('red')
});
Возможно я ошибаюсь, но можно только получить информацию:
var el = document.getElementById('my-elem');
var pseudoStyle = window.getComputedStyle(el, ':after');
А вот изменить можно только через css, добавляя нужный класс, либо генерировать правило "налету".
Можно через переменную сделать.
.blk {
display: inline-block;
position: relative;
width: 200px; height: 32px;
border: 1px solid #CCCCCC;
--inside-color: #003366;
}
.blk::after {
content: '';
display: block;
position: absolute;
width: 24px; height: 24px;
z-index: +2;
border: 0px;
border-radius: 50%;
right: 8px; top: calc(50% - 12px);
background-color: var(--inside-color);
}
Потом у основного элемента менять CSS-свойство --inside-color
, а псевдоэлемент его использует.