Показывать :after при наведении курсора на родительский элемент через CSS

Можно ли display:block; псевдоэлемент :after при наведении курсора на сам родительский элемент?

#myDiv{
   position:relative;
   width:50px;
   height:50px;
   border-style:solid;
   background-color:red;
}
#myDiv:after{
   position:absolute;
   content:"";
   display:none;
   width:50px;
   height:50px;
   border-style:solid;
   background-color:blue;
}

Я устал:

#myDiv:hover #myDiv:after{
    display:block;
}
#myDiv:hover + #myDiv:after{
    display:block;
}
#myDiv:hover > #myDiv:after{
    display:block;
}

Но не повезло, вот скрипка.


css hover css-selectors pseudo-element
person Ali Bassam    schedule 18.03.2013    source источник

Ответы (2)


arrow_upward
41
arrow_downward

Измените его на #myDiv:hover::after

Вы можете использовать либо :after, либо ::after, но в модуле селекторов (3) указано, что последний теперь предназначен для использования, чтобы отличить их от псевдоклассов.

person user2129623    schedule 18.03.2013
comment
Спецификация говорит, что для обратной совместимости можно использовать : вместо ::. В нем говорится, что новые псевдоэлементы должны работать только с ::, а старые поддерживаются с обоими. - person kapa; 19.03.2013

arrow_upward
6
arrow_downward

Вы пытаетесь сослаться на один и тот же элемент, поэтому вам не нужно дублировать селектор ID. Не нужно также использовать дочерний селектор, просто используйте:

#myDiv:hover:after {
    display: block;
}

демонстрация jsFiddle

person kapa    schedule 18.03.2013