CSS:网页表单实现鼠标悬停交互效果

2016-02-20 00:06 16 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区，我们拥有最用心的各种教程，今天就给大家分享CSS:网页表单实现鼠标悬停交互效果的教程，热爱PS的朋友们快点看过来吧！

【 tulaoshi.com - Web开发】

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）制作表单的时候，实现鼠标悬停交互效果有多种方法:
1、在xhtml中直接写入onmouseover、onmouseout脚本就可以实现了，但这样就违背了web标准所倡导的内容、表现相分离的原则。以后若要对此进行修改也将会很繁琐。这样直接写入xhtml也会让页面代码增加，如果只是一个input输入框或许是无所谓的，如果是几十个几百个，增加的字节数就很宠大了。
　　2、在xhtml中加入小脚本，鼠标经过时可以切换CSS。具体内容请看这篇文章。虽然实现了内容、表现相分离，以后的修改也会很方便。但同样会让页面代码增加。

　　我们有没有更好的办法来实现输入框input样式悬停交互的效果呢？
　　我们今天就讨论这样的方法，直接在CSS文件中写入悬停交互效果的小脚本。不但实现了内容与表现分离，而且使xhtml代码减小，促进了代码重用、更加的优化。
　　这一方法的原理，主要是应用CSS的expression，关于expression的更多介绍，请看这篇文章。

input {star : expression(
onmouseover=function(){this.style.borderColor="#060"},
onmouseout=function(){this.style.borderColor="#c00"})}

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）上面的代码，声明了，当鼠标移上去的时候，边框的颜色是#060，当鼠标移除的时候边框的颜色是#c00。我们看一下运行效果：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title用CSS控制输入框input悬停交互样式/titlestyle type="text/css"!--input {border:1px solid #c00;}input {star : expression(onmouseover=function(){this.style.borderColor="#060"},onmouseout=function(){this.style.borderColor="#c00"})}--/style/headbody姓名：input type="text" /br /年龄：input type="text" /br /性别：input type="text" /br /手机：input type="text" /br /地址：input type="text" /br //body/html

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
你也可以这样做

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title用CSS控制输入框input悬停交互样式/titlestyle type="text/css"!--input {border:1px solid #c00;　background:#fff; }input {star : expression(onmouseover=function(){this.style.backgroundColor="#eee"},onmouseout=function(){this.style.backgroundColor="#fff"})}.in40 {width:40px;}.in80 {width:80px;}.in120 {width:120px;}.in200 {width:200px;}--/style/headbody姓名：input class="in80" type="text" /br /年龄：input class="in40" type="text" /br /性别：input class="in40" type="text" /br /手机：input class="in120" type="text" /br /地址：input class="in200" type="text" /br //body/html

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

来源:http://www.tulaoshi.com/n/20160220/1631286.html

上一篇：如何设置Win10自动登录？
下一篇： CSS网页布局问题:li上多出的margin问题

看过《CSS:网页表单实现鼠标悬停交互效果》的人还看了以下文章更多>>

ps怎么设计导航鼠标 ps设计导航鼠标悬停技巧

标签： PS教程 PS基础

首先看一下最终效果和分层： 1、背景色设置为#280021，新建图层，利用钢笔工具画如下图形，填充颜色，然后图层样式中的渐变叠加设置如下： 2、新建图层，用椭圆工具在图形上面建一个选区，然后填充白色，如图。 3、取消选区，选择“滤镜”“高斯模糊...

css制作表单效果

标签： Web开发

!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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titleby 阿会楠 2008-12-4/titlescript language="javascript" type="text/javascript"//js辅...

关于网页表单实现和网页布局如何运用表单

标签： Web开发

引言 HTML表单一文中介绍了关于表单的创建和样式化的基础内容。本文提供了关于表单元素和样式的更多详细内容，以及在真实的web应用程序设计中表单是如何运用的。本文中引入的概念这一部分提供了关于表单实现和界面布局的新信息。规则和标记超载大量使用class和id标记是违反KISS（保持简洁）准则的（在CSS盒模型与基础布局一文中已经解释...

MAC Dock文件夹使用网格显示时如何开启鼠标悬停提示

标签：电脑入门

Dock上的文件夹有着多种显示方式，可以供我们选择。使用不同的方式可以满足不同的用户的需求，现在就让图老师小编再教你一种Dock上的文件夹显示方式的设置方法吧。通常情况下我们使用网格显示的时候，当鼠标悬停在一个图标或者文件上时，是不会有灰色透明阴影提示的！其实开启这个功能也是十分的简单！打开终端输入： defaults write...

CSS教程:网页表单设计技巧

标签： Web开发

输入框( Input )应当符合逻辑地划分为小组，这样大脑就可以很好的处理大堆区域间的关系。– 《HTML权威指南》 Web 应用程序总是利用表单来处理数据录入和配置，但并不是所有的表单都保持一致。输入区域的对齐方式，各自的标签(label)，操作方式，以及周围的视觉元素都会或多或少影响用户的行为。表单布局考虑到...

查看更多精彩>>