鼠標滑過圖層變色
方法一： 能實現單一層樣式變化 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之鼠標滑過按鈕變化