наведите курсор только на 1 элемент с тем же классом jquery

Question

У меня есть этот код в jquery:

$(".pun").hover(function() {
 $(".guns").show(0);        
});

Мой HTML

<div class="pun">
<div class="guns">gun 1</div>
</div>
<div class="pun">
<div class="guns">gun 2</div>
</div>
<div class="pun">
<div class="guns">gun 3</div>
</div>

Мой CSS

.pun {
display:visible
}

.guns {
display:none
}

Я хочу, чтобы при наведении курсора отображалось толькопредмет, который зависает .Теперь, если вы делаете при наведении курсора, показывайте каждому оружию дивы.

Answer 1

Чтобы показать только guns div, который находится внутри pun div, который вы зависаете, используйте функцию find

$(".pun").hover(function() {
   $(this).find(".guns").show(0);        
});

Или предоставьте контекст для вашего селектора

$(".pun").hover(function() {
   $(".guns", this).show(0);        
});

Кроме того, по умолчанию show не выполняет анимацию, поэтому вы можете заменить .show(0); просто show();

Answer 2

Это гораздо проще сделать, используя только CSS:

div.pun div.guns {
    display: none;
}

div.pun:hover div.guns {
    display: block;
}

Кстати, visible не является допустимым значением для свойства display. А также, вам не хватает второго аргумента hover() (если вы придерживаетесь jQuery). Вероятно, вам следует hide() .guns во второй функции или, если вы хотите только показать их (и никогда не скрывать), вы можете просто использовать mouseover() вместо hover().

Answer 3

Изменение

$(".guns").show(0);

Для

$(".guns", this).show(0);

Это выберет только '.guns' в контексте элемента поиска. ( jsFiddle )

Answer 4

В зависании есть два events ограниченных, mouseover и mouseout. Вы можете скрыть это на mouseout

$(".pun").hover(function() {
   $(this).children(".guns").show(100);        
},function(){
   $(this).children(".guns").hide(100);
});

Answer 5

Выполнить выборку

$(".pun").hover(function() {
    $(this).children(".guns").show(0);        
});

Answer 6

Вы можете идентифицировать их по id, или что-то вроде этого должно работать (не проверено):

$(".pun").hover(function() {
    $(this).children(".guns:first").show(0);        
});