导航:首页 > 万维百科 > 网页设计鼠标经过单元格颜色变深

网页设计鼠标经过单元格颜色变深

 发布时间：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中不行。

与网页设计鼠标经过单元格颜色变深相关的知识