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>
+
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.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)