jQuery скрытый div с помощью hover, показывающий все скрытые divs

Question

Я уверен, что это было задано, но я не смог найти решение моей проблемы. У меня есть класс, который называется одним и тем же в трех div. Этот класс скрывается с помощью css. Проблема в том, что, когда я наводил более одного из div, все 3 показывают спрятанные одновременно. Я просто хочу, чтобы элемент, который я наводил, показывал. Я думаю, что я должен использовать .each(), но я не уверен, как все это сочетается.

CSS

.background-hover { 
    display: none; 

HTML:

<div class="home-get-started"> 
    <-- first--><div class="home-get-started"> 
      <!-- image--> 
      <img src="image.png"> 
       <!-- hover hidden state -->    
       <div class="background-hover"> 
       <div class="home-btn">Text</div> 
       </div> 
      </div> 

<--second --> <div class="home-get-started"> 
      <!-- image--> 
      <img src="image.png"> 
       <!-- hover hidden state -->    
       <div class="background-hover"> 
       <div class="home-btn">Text</div> 
       </div> 
      </div> 
    </div> 

JQuery:

$(".home-get-started").hover(
function() { $('.background-hover').css({"display":"block"}); }, 
function() { $('.background-hover').css({"display":"none"}); } 
); 

Answer 1

Вы показа/скрытия все элементы с классом background-hover. Вероятно, вы хотите сделать это только для потомков элемента, вызвавшего событие ...

Вы можете использовать find() для запроса DOM для потомков определенного элемента (this в нашем случае).

$(".home-get-started").hover(
    function() { $(this).find('.background-hover').show(); }, 
    function() { $(this).find('.background-hover').hide(); } 
); 

jsFiddle Demo

Учтите что в некоторых случаях оба текста будут показывать в то же время - это потому, что ваша обертка ДИВ также имеет дом-получить-запускаемый класс так обработчики при наведении курсора будет срабатывать для этого элемента слишком.

Answer 2

Как насчет этого. Вы можете использовать toggle

Demo

$(".home-get-started").hover(
    function() { $(this).find('.background-hover').toggle(); } 

); 

Также у вас есть дополнительные <div class="home-get-started">, что задумано. Если так парить над этим, это вызовет все из них.

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

$(".home-get-started").hover(
    function() { 
     $('> .background-hover', this).toggle(); 
    } 
);