CSS Изменить цвет элемента ": after" при наведении

Допустим, у меня есть список элементов:

<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

Когда я нахожу элемент списка, мне нужно получить больше информации о каждом предмете. Я сделал это с псевдоэлементом CSS :after.

ol {
    list-style-type: decimal-leading-zero;
}

li:hover:after {
    content: " + More info";
}

Вот jSfiddle

Теперь, когда я наводил текст More info, я хочу изменить его цвет. Я действительно не понимаю, как добиться этого эффекта. Я пробовал следующие правила css, но он не работает должным образом.

li:after:hover {
    color: red;
}

li:hover:after:hover {
    color: red;
}

Можно ли сделать это в CSS?

Если да, то интересен другой вопрос, могу ли я прикрепить событие onclick к элементу :after?

Ответ 1

Как и комментарий ExtPro, вы не можете

Но вы можете сделать как...

HTML:

<ol>
    <li>First<span> + More info</span></li>
    <li>Second<span> + More info</span></li>
    <li>Third<span> + More info</span></li>
</ol>

CSS:

li > span {
    display:none;
}

li:hover > span {
    display:inline;
}

li > span:hover {
    color:red;
}

Использовать: активно как onClick?

li > span:active {
    color:blue;
}

Демо: http://jsfiddle.net/79Lvn/2/

или способ JS/jQuery? просто...

$('ol > li').append('<span> + More info</span>');

Демо: http://jsfiddle.net/79Lvn/4/

Ответ 2

это отлично работает

.topButton:hover:after{
    background-color: #000;
}

Ответ 3

Ее ты пошла на работу, немного поиграла с CSS, используя

.third:hover .sub{
      display:inline;   
}

:

http://jsfiddle.net/79Lvn/3/