DW怎样实现当鼠标经过表格时改变表格的背景颜色?
发布网友
共5个回答
懂视网
表格定义了border-collapse:collapse;边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
用td:hover,显示不全
搜索了好久，没有找到好的方法，用左右边框也不完美。
于是就在想，移上去的时候给加个伪元素after，绝对定位。
定义和用法
:after 伪元素在元素之后添加内容。
这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。
注释：如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>border-hover</title><style type="text/css">.w1000{width:1000px;margin:0 auto;}.table{width:100%;border-collapse:collapse;text-align:center;font-size:14px;}.table tr th{border: 1px solid #d9dbda;padding:5px 0;}.table tr td{border: 1px solid #d9dbda;}.height2{height:61px;line-height:61px;}.height1{height:30px;line-height:30px;}.table tr td:hover .list-p{position:relative;}.table tr td:hover .list-p:after{
content: "";
height: 100%;
left: -1px;
position: absolute;
top: -1px;
width: 100%;
z-index: 100;}.table tr td.list01-td:hover .list-p:after{
border: 1px solid #b1bac6;}.table tr td.list02-td:hover .list-p:after{
border: 1px solid #76ca5a;}.table tr td.list03-td:hover .list-p:after{
border: 1px solid #ff9600;}</style></head><body>
<p class="w1000">
<table class="table" cellpadding="0" cellspacing="0" >
<thead>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" class="list01-td"><p class="list-p height2">星期</p></td>
<td colspan="5" class="list02-td" ><p class="list-p height1">星期</p></td>
<td></td>
</tr>
<tr>
<td class="list02-td"><p class="list-p height1">星期</p></td>
<td colspan="4"></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2" class="list03-td"><p class="list-p height1">星期</p></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</p></body></html>显示：
提醒：
1.开始做的时候没做合并列的，合并行的简单点不需要加高度。
热心网友
一、新建网页，创建表格。
新建一个网页，在dreamweaver中点击插入表格按钮，然后在弹出的窗口填写选项，行数自定（我填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切换到代码视图，在源代码中找到表格的各行开头标签处，在标签中加入javascript代码，变成：
onmouseover是鼠标悬浮时，onmouseout是鼠标移开，这句话的意思就是当鼠标悬浮到此行的时候它的背景颜色值为#cccccc，当鼠标移开时背景消失。
只有加上这行代码的标签才会有变换效果，所以三行都要改成这个样子。如果你要做的表格有n多行，觉得每行都加这个javascript代码比较麻烦，只能求助更高级的javascript代码方法了，但它离我的话题太远了，这里就不介绍了，有兴趣的朋友可以在网上搜搜看。
到这里，如何用css制作鼠标经过表格变色的方法已经介绍完了，如果您还有其它更好的方法，可以与我交流，我们共同探讨。
热心网友
给你想要改颜色的单元格取得名字,然后在行为里添加一个onMouseOver事件,事件内容为改变属性,在改变属性对话框中选择刚才取名字的那个单元格,将backgroundColor属性改成你要的就行了,同样再添加一个onMouseOut事件.
热心网友
点击单元格，ID命名123，添加行为，改变属性，元素类型TD单元格，元素ID123
属性选择Backgroundcolor，值#0000FF，触发行为事件onMoustover。
以相同办法添加行为，值#FF0000，触发行为事件onMoustout。
Ctrl+S保存，F12预览。
热心网友
在原来的 td 或者 tr 标签 上加入以下代码onMouseOver="this.style.backgroundColor='#ff0000'"
onMouseOut="this.style.removeAttribute('backgroundColor')"
