jquery - 使用 jQuery 创建鼠标悬停效果时如何编写更少的代码

Question

我现在为这个问题的草率措辞道歉，我会尽力解释我的问题。

假设我正在制作一份包含苹果、香蕉和奇异果的 list 。我想创建一个 jQuery 效果，其中我的鼠标悬停的元素只有在我的鼠标悬停在它上面时才会带有下划线，如果可能的话，不必编写太多代码。这是我目前知道的最高效的方式

<div id='myFavFruit'>
        <p id='apples'>apples</p>
        <p id='bananas'>bananas</p>
        <p id='kiwi'>kiwi</p>
    </div>

    $('#apples').mouseenter(function() {
    $('#apples').css("text-decoration","underline");
    });

    $('#apples').mouseleave(function() {
       $('#apples').css("text-decoration","none");
    });

    $('#bananas').mouseenter(function() {
       $('#bananas').css("text-decoration","underline");
    });

    $('#bananas').mouseleave(function() {
      $('#bananas').css("text-decoration","none);
    });

    $('#kiwi').mouseenter(function() {
      $('#kiwi').css("text-decoration","underline");
    });

    $('#kiwi').mouseleave(function() {
      $('#kiwi').css("text-decoration","none");
    });

感谢您的帮助!

Answer 1

只使用普通的 CSS 会容易得多。如果使用类，您可以按 ID 或仅一行来定位元素。

#apples:hover,
#bananas:hover,
#kiwis:hover {
  text-decoration: underline;
}