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

我为这个问题草率的措辞道歉，我会尽力解释我的问题。
假设我在列一张苹果、香蕉和猕猴桃的单子。我想创建一个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");
    });

谢谢你的帮助！

最佳答案

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

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