There are 3 objects $ ('. Ground') and 3 objects $ ('. Tip') It is necessary that when you hover on $ ('. Ground') i-th piped up $ ('. Tip') i-th

Through jQuery Object fail https://learn.jquery.com/using-jquery-core/jquery-object/

<div class='ground'>red</div> <div class='ground'>green</div> <div class='ground'>blue</div> <div class='tip' style="background-color:red;"></div> <div class='tip' style="background-color:green;"></div> <div class='tip' style="background-color:blue;"></div> <script> var gruond = $('.ground'); for (i=0; i<=gruond.length; i++) { gruond[i].mouseenter(function(){ $('.tip')[i].fadeIn("slow"); }) gruond[i].mouseleave(function(){ $('.tip')[i].fadeOut("slow"); }) } </script>

What is wrong here? http://jsfiddle.net/Nata_Hamster/tcf43p96/

3 answers 3

 $(function(){ var gruond = $('.ground'); $('.ground').mouseenter(function(){ var i = $(this).index('.ground'); $('.tip:eq('+ i +')').fadeIn("slow"); }) $('.ground').mouseleave(function(){ var i = $(this).index('.ground'); $('.tip:eq('+ i +')').fadeOut("slow"); }) }) 
 .ground{ cursor:pointer; width:100px; height:50px; } .tip{ width:150px; height:50px; display:none; position:absolute; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='ground'>red</div> <div class='ground'>green</div> <div class='ground'>blue</div> <div class='tip' style="background-color:red;"></div> <div class='tip' style="background-color:green;"></div> <div class='tip' style="background-color:blue;"></div>

    I would recommend to pay attention all the same to the possibilities of css3 in particular, you can describe this task more transparently using :hover and transition In any case, read here - https://developer.mozilla.org/ru/docs/Web/CSS/ CSS_Transitions / Using_CSS_transitions is interesting. And is it worth using jquery if browsers natively support a lot of interesting gizmos.

    I want to seem rude, but how you want to solve the problem, like crutches.

      gruond [i] in a loop is not a jQuery object. You can convert it to a jQuery object in a similar way - $ (ground [i]). Also, $ ('. Tip') [i] is not a jQuery object, the $ ($ ('. Tip') [i]) option

      Full code:

       var gruond = $('.ground'); var tip = $('.tip'); for (let i=0; i<=gruond.length; i++) { $(gruond[i]).mouseenter(function(){ $(tip[i]).fadeIn("slow"); // или $($('.tip')[i]).fadeIn("slow"); }) $(gruond[i]).mouseleave(function(){ $(tip[i]).fadeOut("slow"); }) }