0


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

1 Resposta 1

0

É só alterar a sua div que tem o carret-vis para baixo da li com primer.

.menu-susp > ul > li.primer:hover ~ .caret-vis { color:#eee; } (quando mouse estiver no li.primer aa classes .caret-vis abaixo dele pegam o efeito, mas só as que estiverem dentro do ul).

tentei colocar fora da ul mas não deu certo kkk

obs: é só mudar a tag de lugar. mas aproveitei e tirei os estilos inline pra eu testar.

Fonte: apostila-html-css-javascript da 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>

1
  • Muito obrigado meu amigo e pelo esclarecimento também... Deus te ilumine!
    – nouvo
    Commented 2/05/2020 às 22:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .