Simplify mouseenter and mouseleave of multiple images

Asked

Viewed 129 times

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

  • Can you explain the question better? put HTML and explain what you put here would help you understand what you want.

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

  • 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

  • Have you tried it with just CSS like I wrote on top?

  • 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)

  • The css leaves only the selected with opacity 0.5, the intention is the others have low opacity when selected the other

  • This I want to decrease javascript.

  • You can even optimize the JS by using more of the jQuery, but decrease, I think it is already very dry.

Show 3 more comments

3 answers

11


  • Thank you very much, very practical so I hadn’t thought about it

  • I noticed a very, very small inconsistency in that when no image is receiving the Hover but the mouse is still over its parent element, all images continue with reduced opacity until the mouse is moved to another element. A possible gambiarra would set a display: inline; in the parent element, but the images "blink" when passing the mouse in the empty space between them.

  • @Brunoaugusto yes, true. But just to save on JS is worth having an extra wrapper to fix it.

  • 1

    Absolutely. This gambit of display, if applied along with the transition, makes this side effect imperceptible.

  • @Brunoaugusto well seen ++

4

You can use the function not to exclude a single element from a selector (in this case the 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. The solution of Sergio, with CSS only, it is a preferable option.

1

Make use of the .children() to pick up the kids from class .navHeader and use of .not() to apply except in what called.

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

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

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.