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

标签 jquery html css

<分区>

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

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

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

最佳答案

onclick也可以使用a标签,只需在href中输入"javascript:void(0)"即可code> 属性,更改类不会有很多 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");
}

DEMO HERE

关于jquery - 使用 onclick 处理悬停图像的最佳方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14084548/

上一篇:html - 水平对齐 2 个 block (一个左浮动)

下一篇:CSS中间图像

相关文章:

jQuery 在调整大小时删除类不起作用?

javascript - jquery 画廊淡入/淡出

html - 如何在具有嵌套 flex 盒的 flex 盒子级之间均匀分配宽度?

html - 事件按钮不应在悬停时改变颜色

jquery - Firefox、Internet Explorer 和 Safari 像素宽度之间的奇怪差异

javascript - 基于eq()选择的点击事件

javascript - jQuery Slidetoggle 旋转 45 度并返回

html - 用于复制具有样式的页面元素的附加组件

javascript - 使用 javascript 将多个用户表单输入存储在关联数组中

ruby-on-rails - 在 Twitter Bootstrap 中驯服 'span' 类