CSS левитации для другого элемента внутри того же элемента

Question

У меня есть этот CSS:

.int_menu > li.showhide { 
    display: none; 
    width: 100%; 
    height: 50px; 
    cursor: pointer; 
    color: #FFFFFF; 
    background: #F36F25; 
} 
.int_menu > li.showhide:hover { 
    display: none; 
    width: 100%; 
    height: 50px; 
    cursor: pointer; 
    color: #F36F25; 
    background: #FFFFFF; 
} 

, который изменяет цвет фона на парения штрафа, однако у меня также есть em, который мне нужно изменить, когда вышеуказанная завис над , я попытался добавить :hover после em

.int_menu > li.showhide .icon em { 
    margin-bottom: 3px; 
    display: block; 
    width: 20px; 
    height: 2px; 
    background: #FFFFFF; 
} 

но не работал, и это делает только изменение при наведении курсора на каждый em

, как я могу сделать все em элементов внутри li.showhide изменений на парении в .int_menu > li.showhide:hover {

Answer 1

Что вы пытаетесь сделать, это это. Я думаю, вы были довольно близки, вам просто нужно поставить дочерний селектор после :hover.

CSS:

.int_menu > li.showhide:hover em { 
    margin-bottom: 3px; 
    display: block; 
    width: 20px; 
    height: 2px; 
    background: #FFFFFF; 
} 

Или что-то подобное