如何在使用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");
    });

苹果

香蕉

猕猴桃
$（“#苹果”）.mouseenter（函数（）{
$（'#apples'）.css（“文本装饰”，“下划线”）；
});
$（“#苹果”）.mouseleave（函数（）{
$（'#apples'）.css（“文本装饰”，“无”）；
});
$（“#香蕉”）.mouseenter（函数（）{
$（“#香蕉”）.css（“文本装饰”、“下划线”）；
});
$（“#香蕉”）.mouseleave（函数（）{
$（“#香蕉”）.css（“文本装饰”，“无”；
});
$（'#kiwi'）.mouseenter（函数（）{
$（'#kiwi'）.css（“文本装饰”、“下划线”）；
});
$（'#kiwi'）.mouseleave（函数（）{
$（'#kiwi'）.css（“文本装饰”，“无”）；
});

---

感谢您的帮助！

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

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

---

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

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

$（'myFavFruit p'）
.mouseenter（函数（）{
$（this.css（“文本装饰”、“下划线”）；
})
.mouseleave（函数（）{
$（this.css（“文本装饰”，“无”）；
})；

苹果

香蕉

猕猴桃

$（'myFavFruit p'）
.mouseenter（函数（）{
$（this.css（“文本装饰”、“下划线”）；
})
.mouseleave（函数（）{
$（this.css（“文本装饰”，“无”）；
})；

苹果

香蕉

猕猴桃

更好的是：

#myFavFruit p:hover {
  text-decoration: underline;
}

更好的是：

#myFavFruit p:hover {
  text-decoration: underline;
}

---

您只能使用css这样做：

#myFavFruit p:hover {
   text-decoration: underline;
}

或者使用jQuery（）

---

您只能使用css这样做：

#myFavFruit p:hover {
   text-decoration: underline;
}

或者使用jQuery（）

---

如果希望使用jquery，请尝试以下操作：

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

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

---

如果希望使用jquery，请尝试以下操作：

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

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

工作小提琴：

工作小提琴：

---

正如@lambo477所说，这可以通过CSS来完成。无论如何，jQuery中的一个快捷方式是使用

.hover（）

方法

例如：

$( "li" ).hover(
  function() {
    $( this ).append( $( "<span> ***</span>" ) );
  }, function() {
    $( this ).find( "span:last" ).remove();
  }
);

$（“li”）。悬停(
函数（）{
$（此）。追加（$（“***”）；
}，函数（）{
$（this.find（“span:last”）.remove（）；
}
);

---

有关更多详细信息，请参见。

正如@lambo477所说，可以使用CSS来完成。无论如何，jQuery中的快捷方式是使用

.hover（）

方法

例如：

$( "li" ).hover(
  function() {
    $( this ).append( $( "<span> ***</span>" ) );
  }, function() {
    $( this ).find( "span:last" ).remove();
  }
);

$（“li”）。悬停(
函数（）{
$（此）。追加（$（“***”）；
}，函数（）{
$（this.find（“span:last”）.remove（）；
}
);

---

有关更多详细信息，请参阅。

使用纯css，因为它可以在没有js/jquery的情况下完成

li:悬停{
文字装饰：下划线；
}
保险商实验室{
列表样式：无；
}

苹果
香蕉
猕猴桃

使用纯css，因为它可以在没有js/jquery的情况下完成

li:悬停{
文字装饰：下划线；
}
保险商实验室{
列表样式：无；
}

苹果
香蕉
猕猴桃

仅添加这一行即可

$("#myFavFruit").find("p").hover(function() { $(this).css("text-decoration","underline"); });

---

如果有帮助，请告诉我只添加这一行就足够了

$("#myFavFruit").find("p").hover(function() { $(this).css("text-decoration","underline"); });

如果有帮助，请告诉我检查：

HTML

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

解释

我在所有的fruit中添加了一个类，这使我可以在两个函数

.mouseenter（）

和

.mouseleave（）

中使用一个css选择器来确定它们的范围

因此，当您使用JQuery选择器

$（“#myfavruit.fruit”）

时，它意味着给我父元素“myfavruit”中包含类“fruit”的所有元素

检查以下内容：

HTML

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

解释

我在所有的fruit中添加了一个类，这使我可以在两个函数

.mouseenter（）

和

.mouseleave（）

中使用一个css选择器来确定它们的范围

---

因此，当您使用JQuery选择器

$（“#myFavFruit.fruit”）

时，它意味着给我所有在父元素“myfavruit”中包含类“fruit”的元素

，并使用

\myfavruit p:hover

这个问题特别提到使用JQuery，您不需要指定元素（“p”）如果您使用的是ID，并且要使用

#myfavruit p:hover

问题特别提到要使用jqueryy，您不需要指定元素（“p”）如果您使用的是ID。请检查下面的我的答案这是最简单的检查下面的我的答案这是最简单的为什么在您可以不使用的情况下添加一个类？因为可维护的原因：如果明天有其他人修改此代码并想添加另一个非结果的段落，您将遇到问题，需要修改代码以防止应用eff我有一个习惯设置一个类来确定我想要的元素的范围。但是显然有一个更好的方法来做到这一点，而无需添加额外的类。你是对的。我也有在任何地方设置类的习惯，但这里并不是问这个例子。我想说的是，为什么在你可以不添加类的情况下添加一个类呢？由于可维护的原因：如果明天有其他人修改此代码并希望添加另一个非结果的段落，您将遇到问题，需要修改代码以防止对新段落产生影响。我习惯设置一个类，以确保对我想要的元素进行范围限定。但显然有更好的方法