Simplify mouseenter and mouseleave of multiple images

Question

Simplify mouseenter and mouseleave of multiple images

Navigation

#1 by (11 votes)
#2 by (4 votes)
#3 by (1 votes)

2

I have a top menu made up of images and I would like to move all the other images except the selected one to decrease the opacity. But my code gets too big, I wish I could slow down for easier reading and interpretation. There are 9 images in total.

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});
}});

javascript jquery

asked by anonymous 04.08.2014 / 20:57

3 answers

4

You can use the not function to exclude a single element from a selector (in this case this ) :

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

Example in jsFiddle . P.S. Sergio's solution , with CSS only, is a preferable option.

04.08.2014 / 21:17

1

Make use of .children() to get children of class .navHeader and use .not() to apply except the one you called.

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

Example: link

04.08.2014 / 21:15

If else with functions How do I round off a value from 39.54 to 39

score 11 · Accepted Answer

You can do this with CSS only:

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

Example: link

If you want you can still add transitions to sweep with transition: opacity 0.5s;

Example: link