JSFiddle - React, Tailwind, and code Playground
HTML
<div class="navHeader">
<a href="box" data-toggle="tooltip" data-placement="top" title="BOX BANHEIRO" style="margin: 0 !important;" >
<img src="http://d1q2y6jhvxkkzk.cloudfront.net/wp-content/uploads/2014/01/openEmu-300x156.jpg" alt="Borto Vidros Box Banheiro" id="img" />
</a>
<a href="janelas" data-placement="top" data-toggle="tooltip" title="JANELAS">
<img src="http://d1q2y6jhvxkkzk.cloudfront.net/wp-content/uploads/2014/01/openEmu-300x156.jpg" 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"/>
...
JavaScript
$('.navHeader').children().hover(
function() {
$('.navHeader').children().not(this).css({opacity:0.5});
}, function() {
$('.navHeader').children().not(this).css({opacity:1});
}
);