Question

实现鼠标经过时整行变色？

划红线的地方不懂？





Answer 1

以前在项目中做过，用 js 弄的，可以使用。
鼠标移到表格某一行上方的时候，该行改变成浅黄色，其它保持（白色）不变，
鼠标点击某一行时，该行变成浅绿色，其它行不变。
代码贴出来给你参考一下，你可以copy 过去试一下：

<!--- 给表格的 <tr> 标签添加 onclik， onmouseover， onmouseout 三个事件，分别调用三个自定义函数，用于改变行颜色，三个函数在后面定义 ------->
<tr onclick=tr_click(this) onmouseover=tr_bgcolor(this) onmouseout=tr_bgcolor_clear(this)>

<script type="text/javascript">

var lastTr=null;//定义表格行对象变量，下面几个函数要用到

//onmouseover后，给表格行添加背景色
function tr_bgcolor(tablerow)
{
if(lastTr)
{
if(tablerow.rowIndex!=lastTr.rowIndex)
tablerow.style.backgroundColor="#FFFF66";
}
else
{
tablerow.style.backgroundColor="#FFFF66";
}
}

//onmouseout后，去除表格行背景色
function tr_bgcolor_clear(tablerow)
{
if(lastTr)
{
if(tablerow.rowIndex!=lastTr.rowIndex)
tablerow.style.backgroundColor="";
}
else
{
tablerow.style.backgroundColor="";
}
}

//onclick 后，改变表格行背景色
function tr_click(tablerow)
{
if(lastTr)
{
lastTr.style.backgroundColor=""; //如果存在上一行，则将上一行的颜色清空
}
tablerow.style.backgroundColor="#AAFFAA";
lastTr=tablerow;
}

</script>

Answer 2

根本不用搞这么复杂，把那些js代码和tr.hover之类的定义都删掉吧。以下的例子就足够了
<style>
tr {background-color: #000; color: #fff}
tr:hover {background-color: #fff; color: #000}
</style>
<table>
<tbody>

<tr><td>赶紧采纳吧</td></tr>

</tbody>

</table>

Answer 3

其实就是给当前行添加一个样式和从当前样式中删除一个定义.
this.className += ' hover';
是给当前TR元素追加一个样式定义,因为class属性中可以有多个用空格分隔的值,所以,为了不将其原有的样式覆盖,这里是通过+=进行追加,也就是想当于this.className = thisclassName + ' hover';
这里定义的样式名与伪类同名,但在CSS样式定义中使用的是点号,说明它是样式名而不是伪类.
this.className = this.classname.replace(/hover/, '');
则是将样式名称hover从当前样式定义中删除,这里用的是替换法,就是把hover字样替换为空字符串,这样就相当于删除了,但可以保留该样式定义中的其它值.