change child: before css при наведении на родителя

Question

Как говорится в названии, я пытаюсь изменить дочерние элементы: до css, когда наведите указатель на родителя. Я не много удачи

.ParentClass:hover .ChildClass:Before{ 
    color:#0000F; 
} 

Что я пробовал: Следующие все работы, но они не то, что я ищу:

Изменения ребенок собственности, но я пытаюсь изменить ребенок: перед тем

.ParentClass:hover .ChildClass{ 
    color:#0000F; 
} 

Это один изменяется при наведении курсора над ребенком происходит в то время как я хочу, чтобы изменение произошло при наведении курсора происходит на родителе:

.ParentClass .ChildClass:hover:before{ 
    color:#0000F; 
} 

Я могу сделать это с помощью javascript, но я ищу чистый CSS, если это возможно.

Answer 1

Вы были так близко к первой попытке. Вместо Before вам нужно будет использовать before (в нижнем регистре). Таким образом, это будет работать нормально:

.ParentClass:hover .ChildClass:before { 
    color: #00000F; 
} 

Во всяком случае, если это не работает, пожалуйста, предоставьте нам полный HTML и CSS код, чтобы поддержать вас в дальнейшем.

Answer 2

Проблема связана с вашим синтаксисом цвета. Используйте две шестнадцатеричные цифры для каждого цвета (RGB):

Вместо этого:

color: #0000F; 

& hellip; сделать это:

color: #0000FF; 

Вы также могли бы сделать одну шестнадцатеричную цифру в цвет:

color: #00F; 

.ParentClass:hover .ChildClass:Before { 
 
    color: #0000FF; 
 
} 
 

 
.ChildClass:Before { 
 
    content: 'Lorem'; 
 
    color: red; 
 
}

<div class="ParentClass"> 
 
    <span class="ChildClass">Ipsum</span> 
 
</div>

Answer 3

имеет ошибку на цвет HEX:

Ошибка: цвет: # 0000F;

Правильно: цвет: # 00000F;