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

笨小孩_DaXin

笨小孩_DaXin

2016-02-20 00:06

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

(本文来源于图老师网站,更多请访问https://m.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"})}

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

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

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
展开更多 50%)
分享

猜你喜欢

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

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

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

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

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

33款CSS3实现的绚丽鼠标悬停效果分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
33款CSS3实现的绚丽鼠标悬停效果分享

完全CSS写的鼠标悬停tip效果

Html CSS布局 Div+CSS XHTML
完全CSS写的鼠标悬停tip效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Photoshop设计导航鼠标悬停状态效果

鼠标 设计
Photoshop设计导航鼠标悬停状态效果

WPS演示制作鼠标悬停效果实现鼠标移动大小图之间跳转

软件教程
WPS演示制作鼠标悬停效果实现鼠标移动大小图之间跳转

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何设置Win10自动登录?

如何设置Win10自动登录?

CSS网页布局问题:li上多出的margin问题

CSS网页布局问题:li上多出的margin问题
下拉加载更多内容 ↓