`

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

 

分享到:
评论

相关推荐

    CSS3鼠标悬停按钮动画事件.zip

    例如,可以监听按钮的mouseover和mouseout事件,当鼠标进入或离开按钮时执行特定的函数。这可能包括播放动画、更改文本或者显示隐藏的内容。以下是一个jQuery的例子: ```javascript $(document).ready(function() ...

    css3黑色UI按钮.zip

    4. jQuery的`.on()`方法:绑定事件监听器,如`click`、`mouseover`和`mouseout`,响应用户的交互。 5. jQuery的`.addClass()`和`.removeClass()`:根据事件添加或移除CSS类,改变按钮的样式。 6. 可能还涉及到响应式...

    jQ鼠标悬停遮罩显示分享按钮.zip

    在JavaScript中,事件是用户或浏览器与网页交互时发生的特定情况,比如鼠标悬停(mouseover)和离开(mouseout)。在“jQ鼠标悬停遮罩显示分享按钮”中,jQuery监听这些事件,并在鼠标悬停时显示分享按钮,鼠标离开...

    原生js鼠标滑过跑到的按钮点击不到效果

    2. **鼠标滑过事件**:在JavaScript中,我们可以使用`mouseover`和`mouseout`事件来响应用户将鼠标光标移动到某个元素上方或离开该元素。`mouseover`触发时,光标进入元素或其子元素;`mouseout`则在光标离开元素...

    javascript经典特效---导航按钮加说明.rar

    2. 事件处理:addEventListener或attachEvent用于添加事件监听器,如click、mouseover和mouseout事件,以便在用户与按钮交互时触发相应的行为。 3. CSS操作:JavaScript可以改变元素的CSS样式,如display属性控制...

    javascript经典特效---综合的按钮.rar

    2. **悬停效果**:利用`mouseover`和`mouseout`事件,可以实现当鼠标进入和离开按钮时改变按钮样式,增加视觉反馈。 3. **按钮加载动画**:在按钮被点击后,可以添加加载动画,如旋转、渐变填充等,表示操作正在...

    原生JavaScript实现鼠标滑过按钮跑来跑去特效源码.zip

    - `addEventListener`: 这个方法用于在元素上添加一个或多个事件处理程序,这里主要是绑定`mouseover`和`mouseout`事件。 - `removeEventListener`: 当不再需要事件处理程序时,使用这个方法移除它们,以避免内存...

    原生js鼠标永远点不到按钮代码.zip

    - `left` 和 `top` 属性:用于设置绝对定位元素的水平和垂直位置,可以配合`mousemove`事件实时改变按钮的位置,使其避开鼠标。 4. 动态效果实现: - 使用`setTimeout()`或`setInterval()`函数可以定时执行某段...

    收藏的几个css按钮样式

    这段代码定义了三种不同的按钮类:`.btn`, `.btn1_mouseout`, `.btn1_mouseover`, `.btn2`, 和 `.btn3_mouseout`。每个类都有其特定的样式属性,包括边框宽度、颜色、内边距、字体大小、鼠标悬停效果以及渐变背景色...

    javascript经典特效---动态的按钮.rar

    "javascript经典特效---动态的按钮.rar"这个压缩包文件,很可能包含了实现JavaScript动态按钮的各种代码示例和资源。 首先,我们来讨论一下JavaScript动态按钮的基本原理。在HTML中,按钮通常由`&lt;button&gt;`或`...

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

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

    按钮样式大全

    最后,`.btn3_mouseout`、`.btn3_mouseover`和`.btn3_mousedown`这组样式展示了按钮在鼠标离开、鼠标悬停和鼠标点击三种状态下的变化。特别是`.btn3_mousedown`,它通过改变边框颜色和背景渐变色,模拟了按钮被按下...

    Windows 10按钮悬停效果.zip

    例如,可以通过`addEventListener`方法监听按钮的`mouseover`和`mouseout`事件,然后根据需求调整按钮的样式或触发其他JavaScript函数。 为了实现这样的效果,开发者可能使用了以下步骤: 1. 创建HTML结构,定义...

    JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例

    JavaScript还支持许多其他事件,例如`mouseover`(鼠标移入)、`mouseout`(鼠标移出)、`mousedown`(鼠标按钮按下)、`mouseup`(鼠标按钮释放)等。此外,还有一些更高级的事件,如拖放事件(drag and drop ...

    根据鼠标状态设置动态变化的按钮.rar

    `addEventListener`函数可以用来绑定`mouseover`、`mouseout`和`mousedown`事件,分别对应鼠标悬停、离开和按下。当这些事件触发时,可以调用对应的函数来更新按钮的样式。 ```javascript const button = document....

    WEB页编程技巧──JavaScript事件的应用.pdf

    "WEB页编程技巧──JavaScript事件的应用.pdf" 本文档主要介绍了...本文档对JavaScript事件和事件驱动编程进行了详细的介绍,并提供了WEB页编程示例,以帮助读者更好地理解和应用JavaScript事件驱动编程技术。

    css3下载按钮效果.zip

    1. **事件监听(event listeners)**:例如,添加`mouseover`和`mouseout`事件监听器,当鼠标进入和离开按钮时触发相应动作。 2. **DOM操作**:使用JavaScript或jQuery修改按钮的样式属性,如改变颜色、大小等。 3. **...

    svg小例子(主要是鼠标事件)

    SVG元素同样支持HTML中的大部分鼠标事件,如`click`(点击)、`mouseover`(鼠标移入)、`mouseout`(鼠标移出)、`mousedown`(鼠标按键按下)和`mouseup`(鼠标按键释放)等。 1. `click`事件:当用户对SVG元素...

    jQuery模拟skype动态按钮,带对勾的按钮

    首先,我们需要监听按钮的`mouseover`和`mouseout`事件。当鼠标悬停时,执行动画;当鼠标离开时,恢复原始状态。 ```javascript $(document).ready(function() { $('#skypeButton').on('mouseover', function() { ...

    鼠标经过变色按钮 鼠标经过变色按钮

    例如,通过监听`mouseover`和`mouseout`事件,可以动态改变按钮的背景颜色或其他属性: ```javascript const button = document.querySelector('.button'); button.addEventListener('mouseover', () =&gt; { button...

Global site tag (gtag.js) - Google Analytics