Table 移动鼠标变色

jeerisguo 2008-10-20 08:15:41

怎么像 csdn 这里的 table 表鼠标移动行变色渐变效果？主要是渐变效果。

参照 <我的帖子> 里的数据表

谢谢

...全文

202 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

weddorn 2008-10-24

打赏
举报

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="changeColor.aspx.cs" Inherits="exmple_move_changeColor" %>

<!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 runat="server">
<title>渐变背景色</title>

<script type="text/javascript">
function cerateTable(){
var tableString = '<table style="width:100%;" border="1" cellpadding="1" cellspacing="1">';
for(i=0; i<10; i++){
var color = (i%2)>0?"#f5f5f5":"#ffffff";
tableString += '<tr><td style="height:40px;background-color:'+color+'" onmouseover="over(this)" onmouseout="out(this,'+(i%2)+')"></td></tr>';
}
tableString += '<tr><td style="height:40px;"></td></tr></table>';
document.getElementById('thisDiv').innerHTML = tableString;
}

poi=null;
g_TimeOut=null;
function over(point){
if(point){
poi = point;
}
if ( poi.style.backgroundColor!='#e3e3e3' )
{
var bgcolor16 = poi.style.backgroundColor.substr(1,2);
var bgcolor10 = eval("0X" + bgcolor16);//转为10进制
bgcolor10 -= 1;
bgcolor16 = bgcolor10.toString(16);//转为16进制
poi.style.backgroundColor = "#" + bgcolor16 + bgcolor16 + bgcolor16;
g_TimeOut = setTimeout( "over()", 10 );//隔0.01秒变一次
}
else
{
if ( g_TimeOut != null )
{
clearTimeout( g_TimeOut );
}
}
}
function out(point,number){
if(number==0){
point.style.background='#ffffff';
}
else
{
point.style.background='#f5f5f5';
}
}

</script>
</head>
<body onload="cerateTable()">
<form id="form1" runat="server">
<div id="thisDiv" style="width:100%;">

</div>
</form>
</body>
</html>

justlovegxm 2008-10-21

打赏
举报

这种渐变效果就是图片配合hover 就行了

justlovegxm 2008-10-21

打赏
举报

渐变效果是用图片 repeat的

Cyril_Tam 2008-10-21

打赏
举报

期待中~~~~

jeerisguo 2008-10-21

打赏
举报

的难道是我视觉错觉？

jeerisguo 2008-10-21

打赏
举报

[Quote=引用 12 楼 Cyril_Tam 的回复:]
就在你们看贴子的页面上, 最上面那里有 "我的帖子" "我参与的帖子" "我的空间" "我的网摘" (CSDN的LOGO旁)

点"我参与的贴子" 进去把MOUSE放到某一行,底色会变....就这个效果
[/Quote]

对啊，就是这个效果？是不是都看到的是渐变？难道是视觉欺骗？

Cyril_Tam 2008-10-21

打赏
举报

就在你们看贴子的页面上, 最上面那里有 "我的帖子" "我参与的帖子" "我的空间" "我的网摘" (CSDN的LOGO旁)

点"我参与的贴子" 进去把MOUSE放到某一行,底色会变....就这个效果

岑子哥 2008-10-21

打赏
举报

不知道是哪个效果

sy_binbin 2008-10-21

打赏
举报

[Quote=引用 5 楼 jeerisguo 的回复:]
这个都没有那个渐变的效果，请大家看看我看着那个有渐变的效果
[/Quote]

哪的效果啊？？？

jeerisguo 2008-10-21

打赏
举报

没人啦？

fashizuiai 2008-10-20

打赏
举报

学习

jeerisguo 2008-10-20

打赏
举报

这个都没有那个渐变的效果，请大家看看我看着那个有渐变的效果

Atai-Lu 2008-10-20

打赏
举报



<table>

<tr onMouseOver="this.style.backgroundColor='#CDE9F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'">

<td>ddddd</td>

</tr>

</table>

sy_binbin 2008-10-20

打赏
举报

Atai-Lu 2008-10-20

打赏
举报

<tr onMouseOver="this.style.backgroundColor='#CDE9F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'">

alai5201987 2008-10-20

打赏
举报

设置一下style
<style> A{
TEXT-DECORATION:NONE
}
BODY{
FONT-family;font-size:
}
table{font-family: ;font-size:
}
A:hover{color:rgb(***,***,***),TEXT-DECORATION:*****
}
有些属性值没我没具体列出来，
你自己做做看啦。