鼠标滑过图层变色
方法一： 能实现单一层样式变化 javascript
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标滑过图层变色</title>
<style type="text/css">
<!--
#test1{
width:50%;
margin:0px auto;
padding:5px;
}
.border1{
background:#ADE9AE ;
border:dotted 1px #ff0000;
}
.border2{
background:#ffffff;
border:solid 1px #00ff00;
}
-->
</style>
<script type="text/javascript">
function changeColor(){
var test;
test=document.getElementByIdx("test1");
test.onmouseover=function(){
test.className='border1';
}
test.onmouseout=function(){
test.className='border2';
}
}
window.onload=changeColor;
</script>
</head>
<body>
<div id="test1" class="border2">
getElementById(参数)根据页面项目的id，取得该对象，对象是惟一的。getElementsByName(参数)---根据页面项目的名字，取得对象集合。
</div>
</body>
</html> css
方法二：实现多层样式变化 html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标划过表格行背景变色效果实例</title>
<style type="text/css">
#table{width:600px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;}
#table th{background:#EEE;border-bottom:1px solid #CCC;padding:4px; text-align:left;}
#table td{border:1px solid #EEE;padding:4px;}
</style>
</head>
<body>
<table id="table">
<tr>
<th>栏目名称</th>
<th>网 址</th>
<th>文章数</th>
<th>网 站</th>
</tr>
<tr>
<td>CSS版式布局</td>
<td>http://www.aa25.cn/layout/</td>
<td>52</td>
<td>标准之路</td>
</tr>
<tr>
<td>DIV+CSS教程</td>
<td>http://www.aa25.cn/css-1.shtml</td>
<td>124</td>
<td>标准之路</td>
</tr>
<tr>
<td>DIV+<a href='http://www.aa25.cn/css-2.shtml' title='CSS实例' target='_blank'>CSS实例</a></td>
<td>http://www.aa25.cn/css-2.shtml</td>
<td>88</td>
<td>标准之路</td>
</tr>
</table>
<script type="text/javascript">
var obj=document.getElementByIdx("table");
for(var i=0;i<obj.rows.length;i++){
obj.rows[i].onmouseover=function(){this.style.background="#FFFF99";}
obj.rows[i].onmouseout=function(){this.style.background="";}
}
</script>
</body>
</html> java
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标滑过图层变色</title>
<style type="text/css">
<!--
#test1{
width:50%;
margin:0px auto;
padding:5px;
}
.border1{
background:#ADE9AE ;
border:dotted 1px #ff0000;
}
.border2{
background:#ffffff;
border:solid 1px #00ff00;
}
-->
</style>
<script type="text/javascript">
function changeColor(){
var test;
test=document.getElementByIdx("test1");
test.onmouseover=function(){
test.className='border1';
}
test.onmouseout=function(){
test.className='border2';
}
}
window.onload=changeColor;
</script>
</head>
<body>
<div id="test1" class="border2">
getElementById(参数)根据页面项目的id，取得该对象，对象是惟一的。getElementsByName(参数)---根据页面项目的名字，取得对象集合。
</div>
</body>
</html> css
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标划过表格行背景变色效果实例</title>
<style type="text/css">
#table{width:600px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;}
#table th{background:#EEE;border-bottom:1px solid #CCC;padding:4px; text-align:left;}
#table td{border:1px solid #EEE;padding:4px;}
</style>
</head>
<body>
<table id="table">
<tr>
<th>栏目名称</th>
<th>网 址</th>
<th>文章数</th>
<th>网 站</th>
</tr>
<tr>
<td>CSS版式布局</td>
<td>http://www.aa25.cn/layout/</td>
<td>52</td>
<td>标准之路</td>
</tr>
<tr>
<td>DIV+CSS教程</td>
<td>http://www.aa25.cn/css-1.shtml</td>
<td>124</td>
<td>标准之路</td>
</tr>
<tr>
<td>DIV+<a href='http://www.aa25.cn/css-2.shtml' title='CSS实例' target='_blank'>CSS实例</a></td>
<td>http://www.aa25.cn/css-2.shtml</td>
<td>88</td>
<td>标准之路</td>
</tr>
</table>
<script type="text/javascript">
var obj=document.getElementByIdx("table");
for(var i=0;i<obj.rows.length;i++){
obj.rows[i].onmouseover=function(){this.style.background="#FFFF99";}
obj.rows[i].onmouseout=function(){this.style.background="";}
}
</script>
</body>
</html> java
- 1. JQuery鼠标滑过表格变色
- 2. javascript 隔行变色，鼠标滑过变色
- 3. 鼠标滑过改变图片
- 4. 鼠标滑过变手型
- 5. 最简单的背景颜色、背景图颜色鼠标滑过变换
- 6. 鼠标滑过出现阴影层
- 7. 鼠标滑过字体颜色从左向右渐变
- 8. CSS实现鼠标滑过表格变色
- 9. css 设置鼠标滑过变色效果
- 10. css之鼠标滑过按钮变化
- 更多相关文章...
- • ionic icon(图标) - ionic 教程
- • jQuery Mobile 图标 - jQuery Mobile 教程
- • 算法总结-滑动窗口
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. JQuery鼠标滑过表格变色
- 2. javascript 隔行变色，鼠标滑过变色
- 3. 鼠标滑过改变图片
- 4. 鼠标滑过变手型
- 5. 最简单的背景颜色、背景图颜色鼠标滑过变换
- 6. 鼠标滑过出现阴影层
- 7. 鼠标滑过字体颜色从左向右渐变
- 8. CSS实现鼠标滑过表格变色
- 9. css 设置鼠标滑过变色效果
- 10. css之鼠标滑过按钮变化