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

2016-02-19 15:16 39 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的网页表单实现鼠标悬停交互效果,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - Web开发 】

制作表单的时候,实现鼠标悬停交互效果有多种方法:
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"})}

(本文来源于图老师网站,更多请访问https://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"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title用CSS控制输入框input悬停交互样式/title
style type="text/css"
!--
input {border:1px solid #c00;}
input {star : expression(
onmouseover=function(){this.style.borderColor="#060"},
onmouseout=function(){this.style.borderColor="#c00"})}
--
/style
/head
body
姓名: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"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title用CSS控制输入框input悬停交互样式/title
style 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
/head
body
姓名: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 全部选择 提示:你可先修改部分代码,再按运行]

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160219/1609270.html

延伸阅读
标签: Web开发
引言 HTML表单一文中介绍了关于表单的创建和样式化的基础内容。本文提供了关于表单元素和样式的更多详细内容,以及在真实的web应用程序设计中表单是如何运用的。 本文中引入的概念 这一部分提供了关于表单实现和界面布局的新信息。 规则和标记超载 大量使用class和id标记是违反KISS(保持简洁)准则的(在CSS盒模型与基础布局一文中已经解释...
          超链接,一般的做法是给一个title属性,这样用户的鼠标悬停在超链接上的时候,它会显示title的内容。但是,你是否厌倦了千篇一律的鼠标悬停效果呢?        当然,也有这方面很炫的代码,但是才跨浏览器方面功夫还是不够,呵呵。我遇到一个不错的css,...
标签: 电脑入门
Dock上的文件夹有着多种显示方式,可以供我们选择。使用不同的方式可以满足不同的用户的需求,现在就让图老师小编再教你一种Dock上的文件夹显示方式的设置方法吧。 通常情况下我们使用网格显示的时候, 当鼠标悬停在一个图标或者文件上时, 是不会有灰色透明阴影提示的! 其实开启这个功能也是十分的简单! 打开终端输入: defaults write...
标签: 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="Conte...
  FrontPage通过“格式”菜单中的“网页过渡”选项,可以为网页的进入或退出设置不同的动态效果。但Dreamweaver中并没有这个特效选项,需另外安装插件。其实,要实现这一效果,用如下方法便可轻松获得: 打开网页源代码,若你想实现网页以垂直百叶窗的方式打开,可以在源代码的〈head〉与〈/head〉之间加入如下语句〈meta http-equiv="Pa...

经验教程

928

收藏

53
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部