Question

我确实搜索了stackoverflow的答案，但找不到我遇到的问题的具体内容。

我有多个id为“forum-cat”的div，我想要它，这样当你鼠标输入其中一个时，它会添加类“mEnter”，当你离开它时它会删除该类。

这是我的PHP：

echo '<div class="well" id="forum-cat">';
echo '<h3 style="margin-top: 20px; margin-bottom: 0px;"><a href="index?id=' . $row2['id'] . '">' . $row2['name'] . '</a></h3>';
echo '<p class="desc">' . $row2['description'] . '</p>';
echo '</div>';

这是我的jQuery：

$(document).ready(function() {
     $('#forum-cat').mouseEnter(function() {
          $(this).addClass('mEnter');
     });
     $('#forum-cat').mouseLeave(function() {
          $(this).removeClass('mEnter');
     });
});

我对jQuery并不是很有经验：谢谢！

Answer 1

每页只能有一个相同的ID。所以你需要使用类来代替。将html更改为.forum-cat而不是#forum-cat。然后以下应该可以正常工作。

此外，它是mouseenter而不是mouseEnter

$(document).ready(function() {
     $('.forum-cat').mouseenter(function() {
          $(this).addClass('mEnter');
     });
     $('.forum-cat').mouseleave(function() {
          $(this).removeClass('mEnter');
     });
});

Answer 2

我的解决方案，感谢：EfrainReyes，是使用CSS（.forumcat：hover）而不是jQuery。感谢所有试图提供帮助的人：）

Answer 3

似乎toggleClass和hover可能会在这里为您提供更好的服务。

$(document).ready(function() {
     $('.forum-cat').hover(function() {
          $(this).toggleClass('mEnter');
     });
});

jQuery这个mouseEnter和mouseLeave

3 个答案: