-1

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>

3
  • 2
    O combinador irmão adjacente + separa dois seletores e corresponde ao segundo elemento se e somente se seguir imediatamente após o primeiro elemento e ambos forem filhos do mesmo pai element. Commented 12/02/2023 às 6:26
  • 2
    uma das maneiras mais simples em browsers modernos: ul:hover li {transparente} ul li:hover {sólido} - (com o :not já postado como resposta evita ter que definir o sólido, mas como provavelmente você já vai setar algo a mais no ítem em hover, pode ser uma boa)
    – Largato
    Commented 13/02/2023 às 2:29
  • 1
    Possivelmente duplicada dessa pt.stackoverflow.com/q/317473/137387 Commented 13/02/2023 às 2:47

3 Respostas 3

2

Uma possibilidade é utilizar a pseudo classe CSS :not() em conjunto a pseudo classe CSS :hover.

/*Aplica o estilo aos filhos de elementos <ul> cujo:
  1 - o dispositivo apontador esteja sobre esse elemento <ul>.
  2 - o dispositivo apontador não esteja sobre esses filhos.
*/
ul:hover> :not(:hover) {
  opacity: 0.3;
}
<ul>
  <li>Criptografar</li>
  <li>Descriptografar</li>
</ul>

<p>Outra lista:</p>

<ul>
  <li>Abrir</li>
  <li>Importar</li>
  <li>Salvar</li>
  <li>Exportar</li>
</ul>

<p>Outra lista com subitens:</p>

<ul>
    <li>Item 1</li>
    <li>Lista com subitens:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Item2</li>
</ul>

A pseudo-classe CSS de negação :not() seleciona elementos que não correspondem a uma lista de seletores. O uso da pseudo-classe :not() deve se feito com cautela pois efeitos e resultados incomuns podem ocorrer ao usá-lo, segue trecho da documentação:

  • Seletores inúteis podem ser escritos usando esta pseudoclasse. Por exemplo, :not(*) corresponde a qualquer elemento que não seja um elemento, o que obviamente não faz sentido, portanto, a regra nunca será aplicada.
  • Essa pseudoclasse pode aumentar a especificidade de uma regra. Por exemplo, #foo:not(#bar) irá corresponder ao mesmo elemento que o mais simples #foo, mas tem a maior especificidade de dois ids seletores.
  • A especificidade da pseudoclasse :not() é substituída pela especificidade do seletor mais específico em seu argumento separado por vírgulas assim fornecendo a mesma especificidade como se tivesse sido escrito :not(:is(X)).
  • :not(.foo) irá corresponder a qualquer coisa que não seja .foo, incluindo <html> e <body>.
  • Este seletor corresponderá a tudo que "não for um X". Isso pode ser surpreendente quando usado com o combinador para descendentes, pois há vários caminhos para selecionar um elemento de destino. Por exemplo, body :not(table) a ainda se aplicará a links dentro de um <table>, já que <tr>, <tbody>, <th>, <td>, <caption>, etc. podem corresponder à parte do seletor :not(table).
  • Você pode negar vários seletores ao mesmo tempo. Exemplo: :not(.foo, .bar)é equivalente a :not(.foo):not(.bar).
  • Se algum seletor passado para a :not() for inválido ou não suportado pelo navegador, toda a regra será invalidada. A maneira eficaz de superar esse comportamento é usar a pseudoclasse :is, que aceita uma lista de seletores indulgente. Por exemplo :not(.foo, :pseudo-classe-invalida), invalidará uma regra inteira, mas :is(:not(.foo), :not(pseudo-classe-invalida))corresponderá a qualquer elemento que não seja .foo.
3
  • 1
    Eu não sabia que funcionária sem o has. Boa resposta! Commented 13/02/2023 às 11:00
  • 1
    @CésarRodriguez Eu estava pensando em editar a sua resposta é trocar o "...só dá pra fazer..." por "...dá pra fazer...". Tem o comentário do Bacco na pergunta que também apresenta outra forma de solução com CSS. Commented 13/02/2023 às 11:10
  • mano eu conheço o :not e n é o que eu quero, pq tipo se eu tiver no vão entre os dois botões ai os dois sofrerão o efeito. Entende? Achou que vou tentar por JS msm. Commented 13/02/2023 às 13:22
1

Em uma declaração CSS só dá pra fazer, usando o seletor :has.

Basicamente, o que está escrito é: sempre que uma ul contiver um li filho direto seu que está sendo apontado pelo mouse, todas as li filhas diretas da ul que não estão sendo apontadas devem receber aquele estilo.

O VSCode provavelmente apontará o :has(>li) (um has começando com >) como erro, mas no navegador, funcionará (se quiser detalhes de compatibilidade, procure no Caniuse).

ul:has(>li:hover) > li:not(:hover) {
  opacity: 0.3;
  /* Funciona */
}
<ul>
  <li class="botao1">Criptografar</li>
  <li class="botao2">Descriptografar</li>
</ul>

1
  • 2
    Firefox 109.0.1 windows 64, nada acontece. Até tem flag pra habilitar, mas em geral, só user avançado sabe disso - e no Safari tá no Technology Preview - mais detalhes em caniuse.com/has
    – Largato
    Commented 13/02/2023 às 2:32
-1

Esse seletor next sibling só funciona em elementos que são irmãos diretos, filhos do mesmo pai.

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

Essa parte em especial a regra não é aplicada, só vai selecionar o próximo e não o anterior, por esse motivo o estilo não terá efeito.

classe botao1 não é irmão próximo do botao2, então o estilo não sera aplicado.

O + (mais) indica que o elemento seguinte no caso as li's estão dentro de uma única ul não são irmãos diretos.

Um possível solução é criar um script para lidar com essa questão.

const btn1 = document.querySelector('.botao1');
const btn2 = document.querySelector('.botao2');

function alternarOpacidade(btnAtivo, btnInativo) {
  btnInativo.style.opacity = '0.3';
  btnAtivo.addEventListener('mouseout', function() {
    btnInativo.style.opacity = '1';
  });
}

btn1.addEventListener('mouseover', function() {
  alternarOpacidade(btn1, btn2);
});

btn2.addEventListener('mouseover', function() {
  alternarOpacidade(btn2, btn1);
});
li {
  list-style-type: none;
}
<ul>
    <li class="botao1">Criptografar</li>
    <li class="botao2">Descriptografar</li>
</ul>

1
  • 1
    Mano fiz cm javascript msm. Ficou legal do seu jeio, acabei fznd outro mas bgdão mano, d vdd. Commented 15/02/2023 às 12:11

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 .