Question

我希望在悬停进出时更改按钮的背景颜色。请帮助我使我的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));

参考 - https://api.jquery.com/hover/

Answer 1

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

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

您无法将参数传递给参数。那是你代码中的错误：

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

{strong>命名函数声明中$(this)的可用性如何？

jQuery .hover() Docs

.hover（handlerIn，handlerOut）

<强> handlerIn
  键入：功能（事件eventObject）
  鼠标指针进入元素时执行的函数。

<强> handlerOut
  键入：功能（事件eventObject）
  鼠标指针离开元素时执行的函数。

因此.hover()方法接受两个函数回调。

并探索.hover()方法的jQuery代码：

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

您可以清楚地看到return s this（Event eventObject）维护方法可链接性（.hover().click().etc()）并让您可以访问this触发事件的（Event eventObject）。

如果（真的，如果），您只需更改:hover

background-color

使用CSS：）

button {
    background-color : rgba(193, 86, 10, 0.86);
}
button:hover {
    background-color : rgba(26, 13, 3, 0.26);
}

Answer 2

这是另一种方式。当jQuery触发回调时，它将在button对象上调用。所以this将是按钮。

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)
});

Answer 3

另一种选择是将mouseover和mouseout事件绑定为更明确的事件绑定。 JSFiddle示例。

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

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

$(document).on('mouseover', 'button', onHoverIn);
$(document).on('mouseout', 'button', onHoverOut);

使用jQuery Hover更改css样式

3 个答案:

使用CSS：）