Javascript 使用jQuery鼠标悬停更改css样式

我想改变一个按钮的背景颜色，在它里面和外面悬停。请帮助我使jquery代码正常工作

function onHoverIn(button) {
    $(button).css('background-color', 'rgba(193, 86, 10, 0.86)')
};
function onHoverOut(button) {
    $(button).css('background-color', 'rgba(26, 13, 3, 0.26)')
};
$("button").hover(onHoverIn(this), onHoverOut(this));

Reference-

回调

hover（）

函数已经与

this

（jQuery元素对象引用）是好朋友，所以您只需撤销

$（this）

不能将参数传递给参数。这就是你的代码中的错误：

.method( myFunz( this ) )
//       ^argument  ^argument :( 

---

那

$（this）

如何在那些命名函数声明中可用

.悬停（handlerIn，handlerOut）

handlerIn
类型：函数（事件对象）
鼠标指针进入元素时要执行的函数

handlerOut
类型：函数（事件对象）
鼠标指针离开元素时要执行的函数

所以

.hover（）

方法接受两个函数回调

并探索

.hover（）

方法的jQuery代码：

hover: function( fnOver, fnOut ) {
    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
},

您可以清楚地看到，它

返回
s
this
（
事件事件对象
），以维护方法的可链接性（
.hover（）.click（）.etc（）
），并使您可以访问触发事件的
this
（
事件对象
）


如果（真的，如果）您只需要一个
：悬停
，它可以更改
背景色

使用CSS:）
回调
hover（）
函数已经是
this
（jQuery元素对象引用）的好朋友，所以您只需撤销
$（this）

不能将参数传递给参数。这就是你的代码中的错误：

.method( myFunz( this ) )
//       ^argument  ^argument :( 


那
$（this）
如何在那些命名函数声明中可用


.悬停（handlerIn，handlerOut）

handlerIn

类型：函数（事件对象）

鼠标指针进入元素时要执行的函数

handlerOut

类型：函数（事件对象）

鼠标指针离开元素时要执行的函数

所以
.hover（）
方法接受两个函数回调

并探索
.hover（）
方法的jQuery代码：

hover: function( fnOver, fnOut ) {
    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
},

您可以清楚地看到，它
返回
s
this
（
事件事件对象
），以维护方法的可链接性（
.hover（）.click（）.etc（）
），并使您可以访问触发事件的
this
（
事件对象
）


如果（真的，如果）您只需要一个
：悬停
，它可以更改
背景色

使用CSS:）
这是另一种方法。当jQuery触发回调时，它将在
按钮上被调用。因此，
此
将是按钮

function onHoverIn(button) {
    $(button).css('background-color', 'rgba(193, 86, 10, 0.86)')
};

function onHoverOut(button) {
    $(button).css('background-color', 'rgba(26, 13, 3, 0.26)')
};


$("button").hover(function() {
    onHoverIn(this)
},function() {
    onHoverOut(this)
});

这是另一种方法。当jQuery触发回调时，它将在
按钮上被调用。因此，
此
将是按钮

function onHoverIn(button) {
    $(button).css('background-color', 'rgba(193, 86, 10, 0.86)')
};

function onHoverOut(button) {
    $(button).css('background-color', 'rgba(26, 13, 3, 0.26)')
};


$("button").hover(function() {
    onHoverIn(this)
},function() {
    onHoverOut(this)
});

另一个选项是将
mouseover
和
mouseout
事件绑定为更明确的事件绑定。例如

另一个选项是将
mouseover
和
mouseout
事件绑定为更明确的事件绑定。例如

谢谢你能告诉我我的代码出了什么问题吗？如果你愿意，可以做一个演示：（我比你落后了几秒钟，因为我想先验证一下……该死！）再次感谢。onHoverXxx方法如何引用按钮？@HelloWorldNoMore函数是函数，因此它的给定方式与使用
.hover（function（）{$（this）.blablabla（）；}）时的方式完全相同
其中
此
始终是
此
（触发事件的元素）。@HelloWorldNoMore进一步解释，jQuery方法如
.hover（）
，
.css（）
，
。单击（）
等。。。在内部命名它（几乎所有与HtmleElements相关的方法），默认情况下返回
this
，这样
这个
引用就可以通过方法传递并在函数本身内部访问（无需在fn参数列表中指定一些参数，例如：
那个
参数）。谢谢。你能告诉我我的代码出了什么问题吗？如果你愿意，可以做一个演示：（我比你落后了几秒钟，因为我想先验证一下……该死！）再次感谢。onHoverXxx方法如何引用按钮？@HelloWorldNoMore函数是函数，因此它的给定方式与使用
.hover（function（）{$（this）.blablabla（）；}）时的方式完全相同
其中
此
始终是
此
（触发事件的元素）。@HelloWorldNoMore进一步解释，jQuery方法如
.hover（）
，
.css（）
，
。单击（）
等。。。在内部命名它（几乎所有与HtmleElements相关的方法），默认情况下返回
this
，这样
此
引用可以通过方法传递并在函数本身内部访问（无需在fn参数列表中指定一些参数，即：
该
参数）。谢谢您的回答。谢谢您的回答。谢谢您的回答。谢谢您的回答。谢谢您的回答。