`

HTML 按钮添加mouseOver 和 mouseOut 事件,改变按钮的事件.

    博客分类:
  • HTML
 
阅读更多

   HTML页面加载完的时候,

   给按钮为class=“button”,注册两个mouseover,和mouseOut两个事件.

 

   <input type="button" class="button" value="测试按钮">

$(function(){	
                //button样式
	$(".button").mouseover(function(){
		$(this).addClass("button_over");
	}).mouseout(function(){
		$(this).removeClass("button_over");
	});
});

 

分享到:
评论

相关推荐

    原生js实现淘宝首页点击按钮缓慢回到顶部效果

    鼠标移进移出按钮,按钮表现发生变化,所以需要给按钮添加mouseover, mouseout事件。要侦听滚动条的变化,所以需要给window添加scroll事件,点击按钮回到顶部,按钮添加click事件。我们将事件处理程序封装成三个...

    JavaScript 复制功能代码 兼容多浏览器(ZeroClipboard)

    其中 mouseOver 事件和 complete 事件比较常用。 前面说过,如果需要动态改变待复制的内容,那 mouseOver 事件就可以派上用场了。例如需要动态复制一个 id 为 test 的输入框中的值,我们可以在鼠标 over 的时候重新...

    关于vue.js过渡css类名的理解(推荐)

     总体就是在解释v-enter,v-enter-active,v-leave,v-leave-active的意思,但是我看了半天,就是看不懂,老是和鼠标的mouseover和mouseout事件联想在一起,在经过多方的查找,总算是理解了,以下就是我所理解的意思,...

    vue基础之事件v-onclick=”函数”用法示例

    v-on:click/mouseout/mouseover/dblclick/mousedown….. 事件: v-on:click=”函数” v-on:click/mouseout/mouseover/dblclick/mousedown….. new Vue({ el:'#box', data:{ //数据 arr:['apple','banana','...

    jQuery详细教程

    $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 四. jQuery实例 jQuery hide() 演示简单的 jQuery hide() 函数。 &lt;html&gt; &lt;script type="text/javascript" src="/jquery/jquery....

    vanilla-carousel:香草JS轮播

    导航点我在构建轮播时考虑了可伸缩性,因此可以在任意数量的图片上使用:步进容器将使用与图像容器中的图片一样多的按钮进行初始化导航控件是动态的,并循环显示当前图片的数量导航: mouseover和mouseout事件侦听器...

    javascript常用对象梳理

    Event.MOUSEOUT Event.MOUSEOVER Event.MOUSEUP Event.MOVE Event.RESET Event.RESIZE Event.SELECT Event.SUBMIT Event.UNLOAD 25. enableExternalCapture事件 语法格式: window....

    porker54:新手练习 | 生成随机54张牌

    随机排54张扑克牌新手练习随机生成54张扑克牌灵感来源:xx分钟记住xx张随机牌按钮功能展开牌组、折叠牌组覆盖全部牌、打开全部牌click:改变单张牌状态mouseover/mouseout:改变单张牌状态

    使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部

    具体代码如下所示: &lt;tr v-for=item value=item.value key=item&gt; ...&lt;div mouseover=mouseenterHander(item.id) mouseout=mouseoutHander(item.id)&gt; {{item.name.substr(0, 8)}} &lt;/templ

    jQuery 仿必应的首页效果

    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; ...

    Leaflet:Wakanda Leaflet Widget - 此小部件将地图添加到您的 Wakanda 页面。 它基于 https 开发的 Leaflet 库

    mouseout : 当鼠标离开地图时触发。 方法 getMap :返回允许附加任何传单方法的地图对象 目标 Leaflet是一个可拖动的地图小部件,您可以将其添加到您的 wakanda 页面。 添加到您的页面后,您可以通过将数据源属性...

    iframeTracker:iframe 的简单点击跟踪器

    iFrameTracker:跟踪 ... 注意:由于它依赖于鼠标事件('mouseover', 'mouseout'),它不适用于触摸设备。 构建说明 $ npm install $ gulp --gulpfile gulpfile clean build 生成jsdoc: $ gulp --gulpfile gulpfi

Global site tag (gtag.js) - Google Analytics