2013-02-22 2 views
0

У меня есть страница с изображениями, которые я хочу показать/скрыть метку на мыши. Изображения также являются ссылками, а div называется «.smallproj». Сценарий JQuery отлично работает, но, конечно, отображает все экземпляры .smallproj p, когда я наводил курсор на любой экземпляр .smallproj a. Я знаю, что мне нужно изменить скрипт таким образом, что только экземпляр .smallproj, который витает над шоу, но что это лучший способ сделать это в этом случае?Показать/скрыть только один DIV с JQuery

JQuery скрипт:

$(".smallproj a").on({ 
    mouseover: function() { 
     $(".smallproj p").show(); 
    },  
    mouseout: function() { 
     $(".smallproj p").hide(); 
    }  
}); 
+1

Пожалуйста, ваши HTML. – zakangelle

ответ

0

Вы хотите использовать this ключевое слово, которое относится к элементу, адресованное событие, а затем пройти от него (a элемента будучи парили над) к p элементу, который требуется показать. Общий случай, не делая никаких предположений о том, где они находятся по отношению друг к другу, за исключением того, что они оба внутри что-то с .smallproj класса, было бы что-то вроде этого:

$(".smallproj a").on({ 
    mouseover: function() { 
     $(this).closest(".smallproj").find("p").show(); 
    },  
    mouseout: function() { 
     $(this).closest(".smallproj").find("p").hide(); 
    }  
}); 
+0

Спасибо! Это именно то, чего я пытался достичь, и с большим объяснением того, что делается. –

1

Я думаю, что вы могли бы сделать:

$('.smallproj p').hover(function(){ 
    $(this).show(); 
}); 

Или, похоже, вы также хотите, чтобы навести на ссылку, так что попробуйте:

$('.smallproj a').hover(function(){ 
    $(this).find('p').show(); 
}); 
0

Вы можете использовать различные способы. Некоторые примеры:

Тот же уровень

$(".smallproj a").on({ 
    mouseover: function() { 
     $(this).siblings("p").show(); 
    },  
    mouseout: function() { 
     $(this).siblings("p").hide(); 
    }  
}); 

Внутри родителя

$(".smallproj a").on({ 
    mouseover: function() { 
     $(this).parent().find("p").show(); 
    },  
    mouseout: function() { 
     $(this).parent().find("p").hide(); 
    }  
}); 

Информация:

  1. Siblings
  2. Parent
Смежные вопросы