1

Есть 3 объекта $('.ground') и 3 объекта $('.tip') Надо, чтобы при наведении на $('.ground') i-тый высплывал $('.tip') i-тый

Через jQuery Object не получается 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>

Что тут не так? http://jsfiddle.net/Nata_Hamster/tcf43p96/

1

3 ответа 3

2

Рекомендовал бы обратить внимание все таки на возможности css3 в частности вы можете более прозрачнее описать данную задачу всего лишь используя :hover и transition В любом случае почитайте вот тут - https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions это интересно. Да и стоит ли использовать jquery если браузеры нативно поддерживают множество интересных штуковин.

Хочу показаться грубым, но то как хотите вы решить задачу, похоже на костыли.

1

gruond[i] в цикле не является объектом jQuery. Можно его преобразовать в jQuery объект подобным образом - $(ground[i]). Также и $('.tip')[i] не является jQuery объектом, вариант $($('.tip')[i])

Полный код:

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

$(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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.