input button按钮加鼠标掠过效果的两种方法
1.直接实现方法
实现简单，但写button按钮比较麻烦。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.zs{
border:0;
width:73px;
height:23px;
background-image:url(normal.gif);
}
.zs_hover{
border:0;
width:73px;
height:23px;
background-image:url(over.gif)
}
</style>
</head>
<body >
<div >
<input type="button" class="zs" onmouseover="this.className='zs_hover'"
onmouseout="this.className='zs'" value="确定">
</input>
</div>
</body>
</html>
2.JQuery实现方法
对于通用的所有button按钮加样式，使用此方法写button较为方便。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-
1.4.4.min.js"></script>
<script type="text/javascript"
src="../jquery.easyui.min.js"></script>
<script>
jQuery(function() {
jQuery("input[type='button']").hover(function() {
jQuery(this).addClass("button_css_hover");
}, function() {
jQuery(this).removeClass("button_css_hover");
});
});
</script>
<style>
.button_css{
border:0;
width:73px;
height:23px;
background-image:url(normal.gif);
}
.button_css_hover{
border:0;
width:73px;
height:23px;
background-image:url(over.gif)
}
</style>
</head>
<body>
<div>
<input type ="button" class = "button_css" value = "确定">
</div>
</body>
</html>
分享到：
相关推荐
在移动应用开发中，按钮（Button）是用户界面不可或缺的元素，它承载着用户的操作行为，如点击提交、打开新页面、执行特定功能等。在 UniApp 开发框架中，Button 组件扮演着同样的角色，提供了丰富的样式和交互功能...
本文介绍了如何在`input`框中添加图片按钮，并探讨了其实现原理、兼容性处理方法及注意事项等内容。通过合理运用CSS和JavaScript技术，我们可以轻松创建出既美观又实用的用户界面组件。希望本文能对你有所帮助！
首先，我们有两个button按钮，通常在HTML中定义为`<input type="button">`或`<button>`元素。这些按钮可能用于执行不同的操作，如提交表单、加载更多内容或触发某些后台处理。在传统的网页交互中，点击按钮会引发...
为了查看这两种方法的效果，你可以打开`img_btn.html`文件，它包含了上述代码示例。同时，`images`文件夹包含用于按钮的图片资源。通过这种方式，我们可以轻松地在网页上创建具有个性化设计的图片按钮，提高用户体验...
自适应设计（Responsive Design）是一种使网站在不同设备和屏幕尺寸上都能正常显示的设计方法。它主要通过媒体查询（Media Queries）、流式布局（Fluid Grids）和弹性图片（Flexible Images）来实现。自适应按钮是...
【Input Director：实现一套鼠标键盘控制两台电脑】 Input Director 是一个免费的软件工具，它允许用户通过一套鼠标和键盘来同时控制两台或者多台电脑。这个实用程序特别适用于那些需要在多台计算机之间频繁切换...
文件输入按钮是网页表单中常见的一种元素，用户通常用它来选择本地文件进行上传。默认情况下，这个按钮的文本通常是英文的，如"Choose File"或"Browse"。为了使网站或应用对全球用户友好，我们需要将其文本翻译成...
CSS3的`transition`属性可以添加平滑的过渡效果，比如当鼠标悬停在按钮上时，颜色、大小或透明度的变化可以有流畅的动画效果。而`animation`属性则允许我们创建更复杂的动画效果，使按钮更具动态感。 6. **响应式...
在Unity引擎中，实现“鼠标掠过显示物体轮廓”的效果通常涉及到两个主要方面：Shader（着色器）和脚本编程。Shader是控制物体表面渲染的关键，而脚本则负责处理用户交互，如检测鼠标事件。以下是关于这两个关键点的...
在IT行业中，JavaScript（简称JS）是一种广泛使用的前端编程语言，尤其在网页交互效果和用户界面设计上扮演着重要角色。本示例所涉及的知识点是"鼠标经过input时的颜色变化"，这是一个基本的JS特效，常用于提升用户...
本资源"css3 input按钮样式代码.zip"正是利用这些特性来定制input类型的按钮样式，以增强页面的视觉效果和用户体验。 输入框(input)是HTML表单中的基本元素，通常用于用户输入数据。在传统HTML中，input按钮样式...
这两个方法会返回一个包含鼠标位置、按钮状态等信息的结构体，如`DIMOUSESTATE2`。此外，还可以通过设置设备的缓冲区大小来处理多条输入事件，避免丢失数据。 Direct Input 7 提供了丰富的功能，例如设置鼠标DPI...
通过本篇文章，我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法，同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先，我们需要注意的是，当页面加载完毕后，jQuery的$(document)....
如果要让浏览按钮更漂亮一点，我们想定义它的背景颜色，甚至想用背景图片来代替，通过css定义input flie还真是办不到的。偶然看到一篇文章：input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0，再定义...
在商店中购买、在背包中出售、使用一种物品的情况下，需要对按钮进行长按处理，来快速增加或减少 物品个数。在Unity的 GUI中有一个RepeatButton可以用，在NGUI中有OnPressed 回调可以使用，但是在 UGUI 中的 Button ...
今天在使用表单是同时使用POST更新、删除操作。...最后关键的是 button的设置,更新按钮,代码如下: <input onclick=”document.linkform.act.value='update'; document.linkform.submit();” name=
一种方法是对button元素应用position属性进行绝对定位，使其脱离正常的文档流，从而能够放在与input相同的行上。需要注意的是，position属性包括static、relative、absolute、fixed和sticky，这里通常会使用absolute...
本文实例讲述了vue input实现点击按钮文字增删功能。分享给大家供大家参考，具体如下： <!doctype html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=...
在ASP.NET开发中，按钮（Button）控件是不可或缺的一部分，它用于用户与网页进行交互，触发特定的事件。创建经典且美观的button样式不仅能够提升用户体验，还能为网站增添专业感。本教程将深入探讨如何在ASP.NET中...
这个“Jquery实现会发光的input按钮特效代码”是一个实例，展示了如何利用jQuery来创建吸引人的用户界面效果，特别是对于表单按钮。下面将详细介绍这个特效的实现原理和相关技术点。 首先，我们需要理解jQuery的...