2

Tenho um menu superior feito por imagens e gostaria de quando passar o mouse todas as outras imagens exceto a selecionada diminuam a opacidade. Só que o meu código fica muito grande, gostaria de poder diminuir para facilitar a leitura e interpretação. São ao total 9 imagens.

HTML:

<div class="navHeader">
    <a href="box" data-toggle="tooltip" data-placement="top" title="BOX BANHEIRO" style="margin: 0 !important;" >
        <img src="{$path}/img/nav1.png" alt="Borto Vidros Box Banheiro" id="img" />
    </a>
    <a href="janelas"  data-placement="top" data-toggle="tooltip" title="JANELAS">
        <img src="{$path}/img/nav2.png" alt="Borto Vidros Janelas" id="img1" />
    </a>
    <a href="portas-externas" title="PORTAS EXTERNAS" data-placement="top" data-toggle="tooltip">
        <img src="{$path}/img/nav3.png" alt="Borto Vidros Portas Externas" id="img2"/>
    </a>
    <a href="portas-internas" title="PORTAS INTERNAS" data-placement="top" data-toggle="tooltip">
        <img src="{$path}/img/nav4.png" alt="Borto Vidros Portas Internas" id="img3"/>
    </a>
    <a href="sacadas" title="SACADAS" data-placement="top" data-toggle="tooltip">
        <img src="{$path}/img/nav5.png" alt="Borto Vidros Sacadas" id="img4"/>
    </a>
    <a href="vidros-especiais" title="VIDROS ESPECIAIS" data-placement="top" data-toggle="tooltip">
        <img src="{$path}/img/nav6.png" alt="Borto Vidros Vidros Especiais" id="img5"/>
    </a>
    <a href="moveis" title="MÓVEIS" data-placement="top" data-toggle="tooltip">
        <img src="{$path}/img/nav7.png" alt="Borto Vidros Móveis" id="img6"/>
    </a>
    <a href="muretas" title="MURETAS" data-placement="top" data-toggle="tooltip">
        <img src="{$path}/img/nav9.png" alt="Borto Vidros Muretas" id="img7"/>
    </a>
    <a href="escadas" title="ESCADAS" data-placement="top" data-toggle="tooltip">
        <img src="{$path}/img/nav10.png" alt="Borto Vidros Escadas" id="img8"/>
    </a>
</div>

JavaScript

var box = ["#img","#img1","#img2","#img3","#img4","#img5","#img6","#img7","#img8"];

$('#box').mouseenter(function(){
    for(var i=1; i<box.length;i++){
    $(box[i]).css({opacity:0.5});
}});
$('#box').mouseleave(function(){
    for(var i=1; i<box.length;i++){
        $(box[i]).css({opacity:1});
}});
8
  • Pode explicar melhor a pergunta? colocar HTML e explicar o que colocou aqui ajudaria a compreender o que quer.
    – Sergio
    Commented 4/08/2014 às 18:59
  • Ok e quer que as imagens fiquem com opacity 0.5 quando o mouse estiver em cima delas? Nesse caso basta CSS: .navHeader img:hover{ opacity: 0.5;}
    – Sergio
    Commented 4/08/2014 às 19:06
  • isso, o mouse entra as outras imagens ficam mais transparentes, para fazer com que dê foco na que foi selecionada, quando sair volta o menu ao normal Commented 4/08/2014 às 19:07
  • Já experimentou só com CSS como escrevi em cima?
    – Sergio
    Commented 4/08/2014 às 19:08
  • Quando você diz que "o código fica muito grande", você se refere ao HTML? Ou seria uma questão de simplificar o JavaScript? (como você está usando jQuery, tenho sugestões nesse sentido, se for o que você quer)
    – mgibsonbr
    Commented 4/08/2014 às 19:09

3 Respostas 3

11

Pode fazer isso só com CSS:

.navHeader:hover img {
    opacity: 0.5;
}
.navHeader img:hover {
    opacity: 1;
}

Exemplo: http://jsfiddle.net/qcT89/

Se quiser pode ainda adicionar transições para suavisar com transition: opacity 0.5s;

Exemplo: http://jsfiddle.net/qcT89/1/

5
  • Muito obrigado, muito prático assim, não tinha pensado nisso Commented 4/08/2014 às 19:17
  • Percebi uma inconsistência muito, mas muito pequena mesmo, em que quando nenhuma imagem está recebendo o hover mas o mouse ainda esteja sobre seu elemento-pai, todas as imagens continuam com opacidade reduzida até que o mouse seja movido para outro elemento. Uma possível gambiarra seria setar um display: inline; no elemento-pai, porém as imagens "piscam" ao passar o mouse no espaço vazio entre elas. Commented 4/08/2014 às 19:40
  • @BrunoAugusto sim, verdade. Mas só para poupar no JS vale a pena ter um wrapper extra para corrigir isso.
    – Sergio
    Commented 4/08/2014 às 19:48
  • 1
    Com certeza. Essa gambiarra do display, se aplicada junto com a transição, torna esse efeito colateral imperceptível. Commented 4/08/2014 às 19:49
  • @BrunoAugusto bem visto ++
    – Sergio
    Commented 4/08/2014 às 19:51
4

Você pode usar a função not para excluir um único elemento de um seletor (no caso o this):

$(".navHeader img").hover(function() {
    $(".navHeader img").not(this).css({ opacity:0.5 });
}, function() {
    $(".navHeader img").not(this).css({ opacity:1 });
});

Exemplo no jsFiddle. P.S. A solução do Sergio, somente com CSS, é uma opção preferível.

1

Faça uso do .children() para pegar os filhos da classe .navHeader e uso do .not() para aplicar exceto na que chamou.

$('.navHeader').children().hover(
  function() {
    $('.navHeader').children().not(this).css({opacity:0.5});
  }, function() {
    $('.navHeader').children().not(this).css({opacity:1});
  }
);

Exemplo: http://jsfiddle.net/2EE37/

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 .