如何用css控制鼠标浮在td上面，td的背景变色，急急急！！

html-css012

如何用css控制鼠标浮在td上面，td的背景变色，急急急！！,第1张

先别看代码多.其实起作用的就那么几段代码. 你复制以下代码执行看到效果后就一目了然了

<!-- 以下是css实现 -->

<style type="text/css">

a { display:blockheight:100%}

a:link { color:#000text-decoration:none}

a:visited { color:#000text-decoration:none}

a:hover { color:#f60text-decoration:nonebackground-color:#FF0000}

</style>

<body>

<table border="1" cellspacing="0" cellpadding="0" align="center">

<tr height="50">

<td width="50" height="50"><a href="javascript:void(0)">1</a></td>

<td width="50" height="50"><a href="javascript:void(0)">2</a></td>

<td width="50" height="50"><a href="javascript:void(0)">3</a></td>

</tr>

<tr height="50">

<td height="50"><a href="javascript:void(0)">4</a></td>

<td height="50"><a href="javascript:void(0)">5</a></td>

<td height="50"><a href="javascript:void(0)">6</a></td>

</tr>

<tr height="50">

<td height="50"><a href="javascript:void(0)">7</a></td>

<td height="50"><a href="javascript:void(0)">8</a></td>

<td height="50"><a href="javascript:void(0)">9</a></td>

</tr>

</table>

<!-- 以下是javascript实现 -->

<table border="1" cellspacing="0" cellpadding="0" align="center">

<tr height="50">

<td width="50" onmouseover="this.style.backgroundColor ='#33CC00'" onmouseout="this.style.backgroundColor ='#fff'">1</td>

<td width="50" onmouseover="this.style.backgroundColor ='#33CC00'" onmouseout="this.style.backgroundColor ='#fff'">2</td>

<td width="50" onmouseover="this.style.backgroundColor ='#33CC00'" onmouseout="this.style.backgroundColor ='#fff'">3</td>

</tr>

<tr height="50">

<td width="50" onmouseover="this.style.backgroundColor ='#33CC00'" onmouseout="this.style.backgroundColor ='#fff'">4</td>

<td width="50" onmouseover="this.style.backgroundColor ='#33CC00'" onmouseout="this.style.backgroundColor ='#fff'">5</td>

<td width="50" onmouseover="this.style.backgroundColor ='#33CC00'" onmouseout="this.style.backgroundColor ='#fff'">6</td>

</tr>

<tr height="50">

<td width="50" onmouseover="this.style.backgroundColor ='#33CC00'" onmouseout="this.style.backgroundColor ='#fff'">7</td>

<td width="50" onmouseover="this.style.backgroundColor ='#33CC00'" onmouseout="this.style.backgroundColor ='#fff'">8</td>

<td width="50" onmouseover="this.style.backgroundColor ='#33CC00'" onmouseout="this.style.backgroundColor ='#fff'">9</td>

</tr>

</table>

光CSS可能实现不了这个问题，若是能实现请说明。我现在说下CSS结合JS实现。

首先我不知道你有在一个页面里有多少个TD，所以我写个通用的方法。希望能给你帮助。

<!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/1888/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style>

.td_bg{

background:#CCC

}

.td_down{

background:#f00

}

</style>

<script>

function mousedown(nameId,numId,total){

for(i=0i<=totali++){

document.getElementById(nameId+i).className = 'td_bg'

//alert(nameId+i)

}

document.getElementById(nameId+numId).className = 'td_down'

//alert(nameId+numId)

}

</script>

</head>

<body>

<div id="showdiv" style="background:#CCC"></div>

<table width="200" border="0" cellspacing="1" cellpadding="0">

<tr>

<td id="td0" onclick="mousedown('td',0,8)" class="td_bg"> </td>

<td id="td1" onclick="mousedown('td',1,8)" class="td_bg"> </td>

<td id="td2" onclick="mousedown('td',2,8)" class="td_bg"> </td>

</tr>

<tr>

<td id="td3" onclick="mousedown('td',3,8)" class="td_bg"> </td>

<td id="td4" onclick="mousedown('td',4,8)" class="td_bg"> </td>

<td id="td5" onclick="mousedown('td',5,8)" class="td_bg"> </td>

</tr>

<tr>

<td id="td6" onclick="mousedown('td',6,8)" class="td_bg"> </td>

<td id="td7" onclick="mousedown('td',7,8)" class="td_bg"> </td>

<td id="td8" onclick="mousedown('td',8,8)" class="td_bg"> </td>

</tr>

</table>

</body>

</html>