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});
}});
0.5
quando o mouse estiver em cima delas? Nesse caso basta CSS:.navHeader img:hover{ opacity: 0.5;}