jquery - 使用 onclick 处理悬停图像的最佳方法？

Question

我需要一个显示图像的按钮，并在悬停时显示另一个图像。这可以通过 link(a) 和带有 class/onmouseover/onmouseout 事件的常规元素来完成。仅在重定向到 URL 时才使用链接，因此如果我需要使用 OnClick（用于调用函数），我应该使用带有 onmouse 事件的常规元素，对吗？

问题是，当 ajax 调用是沙丘时，我需要更改两个按钮的类/onmouseover/onmouseout，这将是很多 jquery 代码。

那么如何尽可能简单地解决这个问题呢？

Answer 1

你也可以用atag for onclick，只给属性"javascript:void(0)"，href改变类不会是很多jquery代码，它只是几行代码。

$("#elementid").attr("class","newclass")
$("#elementid").attr("onmouseover","newvalue")
$("#elementid").attr("onmouseout","newvalue")

CSS 方式

HTML：

<a href="javascript:void(0)" onclick="function()" id="idAnchor"></a>

CSS：

a#idAnchor{
display:block;
width:50px; /*width of your image*/
height:50px; /*height of your image*/
background:url("imagepath");
}

a#idAnchor:hover{
background:url("newimagepath");
}

在这里演示

Answer 2

我不太确定 AJAX 如何改变任何东西。您是否通过 AJAX 动态生成新按钮？你能告诉我们代码吗？

使用 jQuery 的 AJAX 函数应该不是什么大问题。

$.ajax({  type: "POST",  url: "some.php",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
    // change your button classes here
    $(".button1").addClass("class1");
    $(".button1").removeClass("class2");
});

如果您只是更改图像，请使用 :hover CSS 伪类。这比通过鼠标悬停事件快得多。