设置鼠标移入添加红色边框的代码

html-css011

设置鼠标移入添加红色边框的代码,第1张

经查询可以知道，可以使用的代码如下，

鼠标悬浮在输入框改变边框颜色或背景色代码，这个效果有两种方法：方法一是使用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文件，鼠标经过之后，即可变色。