Где ошибка в css?

Question

[Анатолий]

При наведении на элемент идет его подсветка, у элемента есть before, при наведении на элемент он тоже подсвечивается. Как сделать, чтобы не подсвечивался before у родителя?

Comments

[Сергей delphinpro]

Вы можете только переопределить стиль для псевдоэлемента

.el:hover { color: red; }
.el:hover::before { color: green; }

Тогда псевдоэлемент никогда не будет менять цвет.
Если нужно, чтобы он отдельно реагировал — делайте его отдельным элементом.

[Анатолий]

Сюда я скопировал только часть кода, вся проблема была, в том что я использовал свой старый код, и не проверил, что в нем меняется DOM, через js.
Поэтому задал такой банальный вопрос.

Answer 1

[Виталий Першин]

html, body {padding: 0; margin: 0;font-size: 16px; font-family: Arial;}
body { margin: 20px; }

.accordion-menu { list-style-type: none; background-color: #eee; }

.accordion-menu ul li {
	list-style-type: none;
	cursor: pointer; }

.accordion-menu a,
.accordion-menu a:visited { border: none; cursor: pointer; color: #45a030; }

.accordion-menu .menu-item-has-children>a:hover:before,
.accordion-menu a:hover { color: #f59525; }

.accordion-menu .menu-item { padding-left: 7px; position: relative; }
.accordion-menu .menu-item-has-children >a:before {
	position: absolute;
	display: block;
	cursor: pointer;
	color: #45a030;
	left: -7px;
	content: 'X'; }
.accordion-menu .menu-item-has-children.show:before {
	content: '>';
	left: -9px; }

.accordion-menu .current-menu-item a { color: #f59525; cursor: default; }
/*
.accordion-menu .menu-item-has-children .sub-menu { overflow: hidden; height: 0; opacity: 0; transition: all 0.4s ease-in; }
.accordion-menu .menu-item-has-children.show > .sub-menu { overflow: visible; height: auto; opacity: 1; }
*/
.accordion-menu .sub-menu { padding-left: 7px; position: relative; }

Answer 2

[Zlobarchic]

https://codepen.io/zlobarchic/pen/dyozXXd

Answer 3

[Арсений Матыцин]

Привязать hover ко вложенному элементу

Comments

[Анатолий]

Это логично, вопрос как?

[Анатолий]

Тут проблема в следующем:
Предположим есть элемент 100x100, а в нем есть элемент 10x10.
Если навести фокус на 10x10, то элемент 100x100 ведь тоже получается в фокусе.

[WapSter]

Анатолий, ну например не делать hover на li? Или курс по верстки преподать как добавлять ховер элементам?

[Анатолий]

WapSter, кругом загадки. Если бы я знал ответ, то не спрашивался бы )

[WapSter]

Анатолий, li блок с шириной высотой делая на него ховер он распространяется на всю эту ширину и высоту, в том числе и на дочернии элементы. Просто в своем же примере отведи мышкой правее от ссылок, крестик все равно будет подсвечиваться.

[Анатолий]

WapSter, так в этом и есть весь вопрос, как это решить.
Если это не как не решаемо в принципе, пишите ответ, я поставлю решено.

[WapSter]

Анатолий, так тебе ответили сделать ховер ко вложенному элементу это и есть решение.

[Анатолий]

WapSter, я еще раз повторю, что я не знаю как это сделать.