jquery - jQuery CSS Not Changing on mouseenter and mouseleave(I am relatively new to jQuery)

Question

I am trying to change the color of heading when a user scrolls over them. However, my code is not working. Yes I am newer to jQuery.

$("h1").mouseenter(function(){
("h1").css("color", "#00FF66");
})
$("h1").mouseleave(function(){
("h1").css("color", "#FF00FF");
})

I have tried everything in my knowledge. Any help?

Answer 1

使用 jQuery 的$(this)选择器获取悬停的 h1 元素

$("h1").mouseenter(function(){
    $(this).css("color", "#00FF66");
})
$("h1").mouseleave(function(){
    $(this).css("color", "#FF00FF");
})

Answer 2

对于那位先生，请使用 CSS。

html:

<h1>Boo</h1>

CSS：

h1{color:#00FF66;}
h1:hover{color:#FF00FF;}

希望有帮助。

ps-如果您仍然决定坚持使用 javascript，我建议您使用 Kierchon 的答案。