鼠标悬浮在输入框改变边框颜色或背景色代码,这个效果有两种方法:方法一是使用CSS中的伪元素:focus;方法二还是使用一小段javascript;
方法一的html代码和上面的例子中一样,只不过在CSS中加入以下一段:
input:hover { border:1px solid #F00}
在鼠标悬浮在输入框时,输入框边框就会变成红色,但是此方法只在Firefox浏览器和IE7以上版本中有效,IE6不支持,所以它有一定的局限性。
方法二的代码大部分和上面的例子中一样,只不过在在后面再加入一个一段鼠标悬浮的代码:
HTML代码
action="">
for="textfield">输入内容:
type="text" id="textfield" value="Dreamweaver"
οnfοcus="this.select()"
οnmοuseοver="this.style.borderColor='#FF6600'"
οnmοuseοut="this.style.borderColor=''" />
本代码来自IT知道网JAVASCRIPT 示例
使用这段代码,大多数浏览器都可以支持
1、首先新建一个html文件,命名为test.html,在test.html文件内,使用table标签创建一个表格,用于测试。
2、在test.html文件内,设置table标签的class属性为mytable,同时设置边框为1px。
3、接着在css标签内,通过class设置表格的样式,定义它的宽度为300px,高度为200px。
4、在css标签内,通过td元素名称和“:hover”选择器定义当鼠标指向单元格时,改变单元格的背景颜色,设置为红色。
5、最后在浏览器打开test.html文件,鼠标经过之后,即可变色。