Alguém poderia me ajudar a descobrir porque esta linha .menu-susp > ul > li.primer:hover ~ .caret-vis { color:#eee; }
não funciona?
O que deveria acontecer: A class fa fa-caret-right caret-vis
deveria ficar com color:#eee
ul { list-style-type: none; }
.menu-susp > ul > li { width:calc(100% - 30px);padding:7px 20px 9px 10px;margin:2px 0 2px 0; }
.menu-susp > ul > li:hover { background:#eee; }
.menu-susp > ul > li.c-line { height:1px;border-top:1px solid #ddd;padding:0;margin:5px 0; }
.menu-susp > ul > li.primer:hover ~ .caret-vis { color:#eee; }
.emLinko { cursor:pointer; color:#ff6500; }
.emLinko:hover { color:#FF9900; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='menu-susp' style='position:relative;padding:3px 0;margin:10px 100px 10px 10px;border:1px solid #b8b8b8;'>
<div class='fa fa-caret-right' style='position:absolute;width:10px;top:9px;right:-9px;font-size:20px;color:#b8b8b8;'></div>
<div class='fa fa-caret-right caret-vis' style='position:absolute;width:10px;top:9px;right:-7px;font-size:20px;color:#fff;'></div>
<ul style='padding:0;margin:0;'>
<li class='emLinko primer'>Alterar visita</li>
<li class='emLinko'>Abrir beneficiário</li>
<li class='emLinko'>Excluir visita</li>
<li class='emLinko'>Ativo</li>
<li class='emLinko'>Concluído</li>
<li class='c-line'></li>
<li class='emLinko emBlkA'>Lembrete</li>
</ul>
</div>
Obrigado