導航:首頁 > 萬維百科 > 網頁設計滑鼠經過單元格顏色變深

網頁設計滑鼠經過單元格顏色變深

 發布時間：2021-01-27 20:52:49

1、滑鼠經過單元格變色問題

<style>
.d_over{background-color:#307172;}
.d_out{background-color:#EFEFEF;}
</style>]
<head>
<meta http-equiv="Content-Language" content="zh-cn">
</head>

<body>
<table border="1px" width="100%">
<div class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'">中國</div></table>
</body>
網格來內最好源有DIV標簽
然後把class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"放到如上的位置

2、滑鼠滑過單元格，顏色改變，點擊單元格，顏色也改變

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeColor(obj){
if(obj.id==document.getElementById("colorRowId").value){
return;
}
var tempStyle = obj.className;
if(document.getElementById("colorRowId").value!=""){
var temp = document.getElementById("colorRowId").value;
var preStyle = document.getElementById("preStyle").value;
if(document.getElementById(temp).className!="style3"){
if(preStyle=="green"){
document.getElementById(temp).className = "green";
}else{
document.getElementById(temp).className = "";
}
}
}
if(obj.className!="style3"){
obj.className = "style2";
}
document.getElementById("colorRowId").value = obj.id;
document.getElementById("preStyle").value = tempStyle;
}

function selectData(obj){
var tempSpreStyle=obj.className;
if(document.getElementById("sRowId").value!=""){
var temp = document.getElementById("sRowId").value;
var sPreStyle = document.getElementById("sPreStyle").value;
if(sPreStyle=="green"){
document.getElementById(temp).className = "green";
}else{
document.getElementById(temp).className = "";
}
}
obj.className = "style3";
document.getElementById("sPreStyle").value = document.getElementById("preStyle").value;
}
//-->
</script>
<style type="text/css">
<!--
.style2 {
background-color: #ffc02b;
color: #eeeeee;
font-size: 12px;
}
.style3 {
background-color: #ccc02b;
color: red;
font-size: 12px;
}
body{
overflow:hidden;
}
-->
</style>

<input type="text" id="sPreStyle"/>
<input type="text" id="preStyle"/>
<input type="text" id="sRowId"/>
<input type="text" id="colorRowId"/>
<table >
<tr onmouseover="changeColor(this);" onclick="selectData(this);" id="tr_1">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr onmouseover="changeColor(this);" onclick="selectData(this);" id="tr_2">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<tr onmouseover="changeColor(this);" onclick="selectData(this);" id="tr_3">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr onmouseover="changeColor(this);" onclick="selectData(this);"id="tr_4">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
</table>

</BODY>
</HTML>

還有點小問題，累了，你自己調試出來吧

3、DW 滑鼠經過表格 背景變色

一、新建網頁，創建表格。
新建一個網頁，在中點擊插入表格按鈕，然後在彈出的窗口填寫選項，行數自定（我填3），列數填2就可以了，表格寬度300像素，邊框粗細、單元格邊距和間距都填0，頁眉選擇無即可，如圖一所示，然後點擊確定。新表格創建完畢。

二、給表格定義背景色。
在Dreamweaver右側的CSS面板中點擊「新建CSS規則」按鈕，如圖二，在彈出的選項板中「選擇器類型中」選擇第二項「標簽」，在「標簽」選項中填入或選擇tr，「定義在」選擇僅對該文檔，如圖三所示，然後確定。

下面彈出的是CSS規則定義窗口，左側選擇「背景」，右側的背景中選擇顏色#666666，如圖四所示，然後點擊確定。

三、添加:hover屬性
現在做的就是重復第二步中的兩項操作，點擊「新建CSS規則」按鈕，在彈出的選項板中選擇器類型中選擇第三項「高級」，在下面選擇a:hover，並把a改成tr，或者直接填寫上tr:hover也可以，「定義在」選擇僅對該文檔，如圖五所示，然後確定。

在下面彈出的CSS規則定義窗口中同樣選擇背景，右側選擇一個背景顏色#CCCCCC，如圖六所示，然後點擊確定。

用各種瀏覽器預覽一下，你會發現在Firefox和IE7中的效果是正常的，但在IE6中沒有任何效果。這是因為他不支持偽類:hover，只能想辦法修正一下，所以只能動用JavaScript。

四、用JavaScript修正IE6中的效果。
將Dreamweaver切換到代碼視圖，在源代碼中找到表格的各行開頭<tr>標簽處，在<tr>標簽中加入JavaScript代碼，變成：

<tr onmouseover="this.style.background='#CCCCCC'" onmouseout="this.style.background=''" >

onmouseover是滑鼠懸浮時，onmouseout是滑鼠移開，這句話的意思就是當滑鼠懸浮到此行的時候它的背景顏色值為#CCCCCC，當滑鼠移開時背景消失。

只有加上這行代碼的<tr>標簽才會有變換效果，所以三行都要改成這個樣子。如果你要做的表格有N多行，覺得每行都加這個JavaScript代碼比較麻煩，只能求助更高級的JavaScript代碼方法了，但它離我的話題太遠了，這里就不介紹了，有興趣的朋友可以在網上搜搜看。

到這里，如何用CSS製作滑鼠經過表格變色的方法已經介紹完了，如果您還有其它更好的方法，可以與我交流，我們共同探討。

4、網頁設計標題上原來字體顏色很淺,當滑鼠移到上面時字體顏色就會變深,然後移開滑鼠又會恢復

給標題外加一個div或span，並且設置class樣式：
div{color:#cccccc;}灰色
div:hover { color:#000000;}黑色

5、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>
.table1 {border-collapse: collapse;}
.table1 tr {}
.table1 tr td {text-align:center; line-height:36px;}
.table1 tr td:hover { background-color:#f00; color:#fff;}
</style>
</head>

<body>

<table class="table1" width="70%" border="1">
  <tr>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
  </tr>
  <tr>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
  </tr>
  <tr>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
  </tr>
  <tr>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
  </tr>
  <tr>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
    <td>測試</td>
  </tr>
</table>

</body>
</html>

6、dreamweaver製作滑鼠經過表格時，表格背景顏色改變。

這個必須要寫樣式啊，你說代碼不懂，我就真不知道該怎麼給你講解了！

7、Dreamweaver中 滑鼠經過一個單元格 然後單元格的顏色改變 要怎樣做

<table width=300 cellspacing=0 border=0 >
<tr >
<td onMouseOver="this.style.backgroundColor='#cccccc'" onMouseOut="this.style.backgroundColor=''" >1</td>
</tr>
</table>

8、網頁製作 如何使表格背景色在滑鼠經過時改變？

如果你是適應ie7,8的話，直接用css.

<style
type="text/css">
table:hover{
background-color:#00FF00}
</style>

但是這個在ie6中不行。

與網頁設計滑鼠經過單元格顏色變深相關的知識