2
I have a top menu made by images and would like when mouse all other images except the selected decrease the opacity. Only that my code gets too big, I wish I could decrease to facilitate reading and interpretation. Are in total 9 images.
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});
}});
Can you explain the question better? put HTML and explain what you put here would help you understand what you want.
– Sergio
Ok and want the images to be opacity
0.5
when the mouse is on top of them? In this case CSS is enough:.navHeader img:hover{ opacity: 0.5;}
– Sergio
this, the mouse enters the other images become more transparent, to make it focus on what was selected, when exit return the menu to normal
– hahnmatheus
Have you tried it with just CSS like I wrote on top?
– Sergio
When you say "the code gets too big," do you refer to HTML? Or is it a matter of simplifying Javascript? (as you are using jQuery, I have suggestions to that effect, if that’s what you want)
– mgibsonbr
The css leaves only the selected with opacity 0.5, the intention is the others have low opacity when selected the other
– hahnmatheus
This I want to decrease javascript.
– hahnmatheus
You can even optimize the JS by using more of the jQuery, but decrease, I think it is already very dry.
– Bruno Augusto