Apply Hover to another element with CSS

Question

Could someone help me figure out why this line .menu-susp > ul > li.primer:hover ~ .caret-vis { color:#eee; } doesn’t work?

What should happen: A class fa fa-caret-right caret-vis should be 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>

Thank you

Answer 1

Just change your div that has the Carret-vis down from the li with primer.

.menu-susp > ul > li.primer:hover ~ .caret-vis { color:#eee; } (when mouse is in li.primer aa classes . Caret-vis below it catch the effect, but only those inside ul).

I tried to put off ul but it didn’t work out kkk

Obs: just change the tag place. but I took advantage and removed the inline styles for me to test.

Source: apostille-html-css-javascript from Caelum

* {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  padding: 3px 0;
  margin: 10px 100px 10px 10px;
  border: 1px solid #b8b8b8;
}

.seta1 {
  position: absolute;
  width: 10px;
  top: 9px;
  right: -9px;
  font-size: 20px;
  color: #b8b8b8;
}

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;
}

.seta2 {
  position: absolute;
  width: 10px;
  top: 9px;
  right: -7px;
  font-size: 20px;
  color: #fff;
}

.seta:hover {
  color: #eee;
}

.menu-susp > ul > li.primer:hover ~ .caret-vis {
  color: #eee;
}

/* .caret-vis ~ .primer:hover {
  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 container'>
    <div class='fa fa-caret-right seta1'></div>
    <!-- retira daqui =-->

    <ul >
      <li class='emLinko primer'>Alterar visita</li>
      <!-- Coloca abaixo da classe primer -->
      <div class='fa fa-caret-right caret-vis seta2'></div>      
      <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>