Skip to main content
Formatação
Fonte Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62

Tenho duas 'li'<li> que estou usando como botões e quero fazer com que quando eu passe o mouse em uma, a outra fique mais transparente. Quando eu faço no botão 1botão 1, o botão 2botão 2 fica transparente. Mas quando eu faço no botão 2botão 2, não acontece nada no 1. 

O que eu faço? Não achei nada na internet.

.botao1:hover+.botao2 {
  opacity: 0.3;
  /* Funciona */
}

.botao2:hover{
  opacity: 0.3;
  /* Não funciona */
}
<ul>
  <li class="botao1">Criptografar</li>
  <li class="botao2">Descriptografar</li>
</ul>

Tenho duas 'li' que estou usando como botões e quero fazer com que quando eu passe o mouse em uma, a outra fique mais transparente. Quando eu faço no botão 1, o botão 2 fica transparente. Mas quando eu faço no botão 2, não acontece nada no 1. O que eu faço? Não achei nada na internet.

.botao1:hover+.botao2 {
  opacity: 0.3;
  /* Funciona */
}

.botao2:hover{
  opacity: 0.3;
  /* Não funciona */
}
<ul>
  <li class="botao1">Criptografar</li>
  <li class="botao2">Descriptografar</li>
</ul>

Tenho duas <li> que estou usando como botões e quero fazer com que quando eu passe o mouse em uma, a outra fique mais transparente. Quando eu faço no botão 1, o botão 2 fica transparente. Mas quando eu faço no botão 2, não acontece nada no 1. 

O que eu faço? Não achei nada na internet.

.botao1:hover+.botao2 {
  opacity: 0.3;
  /* Funciona */
}

.botao2:hover{
  opacity: 0.3;
  /* Não funciona */
}
<ul>
  <li class="botao1">Criptografar</li>
  <li class="botao2">Descriptografar</li>
</ul>

Formatação e remoção de ruídos de comunicação. https://pt.stackoverflow.com/help/behavior
Fonte Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62

Estou a muito tempo tentando isso. Tenho duas 'li' que estou usando como botões e quero fazer com que quando eu passe o mouse em uma, a outra fique mais transparente. Quando eu faço no botão 1, o botão 2 fica transparente. Mas quando eu faço no botão 2, não acontece nada no 1. O que eu faço? Não achei nada na internet.

HTML:

    <ul>
        <li class="botao1">Criptografar</li>
        <li class="botao2">Descriptografar</li>
    </ul>

CSS:

.botao1:hover+.botao2 {
  opacity: 0.3;
  /* Funciona */
}

.botao2:hover{
  opacity: 0.3;
  /* Não funciona */
}
<ul>
  <li class="botao1">Criptografar</li>
  <li class="botao2">Descriptografar</li>
</ul>
.botao1:hover + .botao2 {
    opacity: 0.3; /* Funciona */
}

.botao2:hover + .botao1 {
    opacity: 0.3; /* Não funciona */
}
 

Estou a muito tempo tentando isso. Tenho duas 'li' que estou usando como botões e quero fazer com que quando eu passe o mouse em uma, a outra fique mais transparente. Quando eu faço no botão 1, o botão 2 fica transparente. Mas quando eu faço no botão 2, não acontece nada no 1. O que eu faço? Não achei nada na internet.

HTML:

    <ul>
        <li class="botao1">Criptografar</li>
        <li class="botao2">Descriptografar</li>
    </ul>

CSS:

.botao1:hover + .botao2 {
    opacity: 0.3; /* Funciona */
}

.botao2:hover + .botao1 {
    opacity: 0.3; /* Não funciona */
}

Tenho duas 'li' que estou usando como botões e quero fazer com que quando eu passe o mouse em uma, a outra fique mais transparente. Quando eu faço no botão 1, o botão 2 fica transparente. Mas quando eu faço no botão 2, não acontece nada no 1. O que eu faço? Não achei nada na internet.

.botao1:hover+.botao2 {
  opacity: 0.3;
  /* Funciona */
}

.botao2:hover{
  opacity: 0.3;
  /* Não funciona */
}
<ul>
  <li class="botao1">Criptografar</li>
  <li class="botao2">Descriptografar</li>
</ul>
 

Fonte Link

Hover no elemento irmão não funciona

Estou a muito tempo tentando isso. Tenho duas 'li' que estou usando como botões e quero fazer com que quando eu passe o mouse em uma, a outra fique mais transparente. Quando eu faço no botão 1, o botão 2 fica transparente. Mas quando eu faço no botão 2, não acontece nada no 1. O que eu faço? Não achei nada na internet.

HTML:

    <ul>
        <li class="botao1">Criptografar</li>
        <li class="botao2">Descriptografar</li>
    </ul>

CSS:

.botao1:hover + .botao2 {
    opacity: 0.3; /* Funciona */
}

.botao2:hover + .botao1 {
    opacity: 0.3; /* Não funciona */
}