addClass() к определенным элементам внутри содержащей оболочки

#javascript #jquery #addclass #jquery-hover

#javascript #jquery #addclass #jquery- наведите курсор

Вопрос:

Я ломал голову над тем, как этого добиться. У меня есть содержащий элемент, внутри которого есть два отдельных a тега, к которым я хочу добавить addClass() (т. Е. Когда я наведу курсор на один a тег, он добавляет класс к этому, а другой a тег — к этому содержащему элементу).). Я вроде бы добился этого, используя приведенный ниже код:

 <li class="element">
<header>
   <h1>Heading</h1>
</header>
   <a href="">
      <img src="image" alt=" dummy" />
   </a>
   <div>
      <h2><a href="">Heading 2</a></h2>
      <p>Paragraph</p>
   </div>
</li>

$('.element').hover(
 function() {
  $(this).children().addClass('hover');
},
 function() {
  $(this).children().removeClass('hover');
}
);

Однако я хочу, чтобы наведение вызывалось только при наведении на ‘a’ сам по себе, а не на весь элемент. К сожалению, когда я использую этот метод:

 $('.element a').hover(
 function() {
  $(this).addClass('hover');
},
 function() {
  $(this).removeClass('hover');
}
);

Это добавляет класс только к первому тегу ‘a’.

Любой совет был бы высоко оценен.

1. почему бы не использовать селектор css a:hover ? пример использования здесь -> w3schools.com/cssref/sel_hover.asp

2. Я не могу использовать функцию наведения, поскольку мне нужно, чтобы класс запускался для всех элементов a, даже когда я навожу курсор на один.

3. понял — удалил мой ответ

4. обновите мой ответ, я думаю, это то, что вы хотите?

Ответ №1:

 $('.element a').hover(
 function() {
  $(this).add($(this).siblings()).addClass('hover');
},
 function() {
  $(this).add($(this).siblings()).removeClass('hover');
}
);

$(this) содержит только фактический объект, на который наведен указатель мыши. Я .добавляю ()-редактирую родственные элементы объекта к этому набору, вы можете отфильтровать его с помощью $ (this).братья и сестры (‘a’) или аналогичные, если вы предпочитаете.

1. Это почти достигнуто! Единственная проблема заключается в том, что при наведении курсора мыши на a наведение курсора применяется к div, а не к a внутри него. Я попытался указать $ (this). решение siblings (‘a’), но безрезультатно.

Ответ №2:

Вам нужно применить addClass к каждому элементу … попробуйте это :

 $('.element a').each(function() {
    $(this).hover(function() {
        $(".element a").each(function() {
            $(this).addClass('hover');
        });
    }, function() {
        $(".element a").each(function() {
            $(this).removeClass('hover');
        });

    });
});

http://jsfiddle.net/manseuk/GqP4Z/

1. Не совсем — это добавляет класс к каждому ‘.элементу a’ на странице, а не к этому конкретному элементу списка.

2. @Michael по вопросу, который вы не упомянули, было несколько divs с элементом class ?!?!?!

3. извинения — я думал, поскольку это элемент списка, что он будет указывать на несколько элементов, но я должен быть более конкретным. Я думаю, что приведенный ниже ответ действительно близок к тому, что мне нужно, но просто не могу получить вложенные теги ‘a’.