Скрытый div jQuery с использованием наведения, показывающего все скрытые div

Я уверен, что это было задано, но я не смог найти решение своей проблемы. У меня есть класс, который называется одинаково в трех разделах. Этот класс скрыт с помощью css. Проблема в том, что когда я наводил курсор на 1 из 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"}); }
);

jquery dom-traversal
person tDiesel    schedule 09.05.2013    source источник
comment
Возможный дубликат показывает отдельные элементы независимо, используя каждый метод   -  person David says reinstate Monica    schedule 10.05.2013

Ответы (2)


arrow_upward
4
arrow_downward

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

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

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

демонстрация jsFiddle

Имейте в виду, что в некоторых случаях оба текста будут отображаться одновременно - это потому, что ваш div-оболочка также имеет класс home-get-started, поэтому обработчики наведения также будут срабатывать для этого элемента.

person kapa    schedule 09.05.2013
comment
Спасибо. Я думал, что это что-то настолько легкое. Я был просто в тупике. - person tDiesel; 10.05.2013

arrow_upward
1
arrow_downward

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

Демо

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

);

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

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

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