如何实现HTML中鼠标经停时整行(tr)变色

如何实现HTML中鼠标经停时整行(tr)变色,第1张

1.首先在</head>之前插入这么一段代码

<style type="text/css">

tr.change:hover

{

background-color:#00FF00

}

</style>

然后再要变色的表格处的<tr>标签处加入如下

<tr class="change">,就可以实现

奉上一个小例子的代码

<html >

<head>

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

<title>change</title>

<style type="text/css">

tr.change:hover

{

background-color:#00FF00

}

</style>

</head>

<body>

<h1>鼠标经停变色</h1>

<table width="80%" border="1" align="center">

<tr class="change">

<td></td>

<td></td>

<td></td>

</tr>

<tr class="change">

<td></td>

<td></td>

<td></td>

</tr>

<tr class="change">

<td></td>

<td></td>

<td></td>

</tr>

</table>

</body>

</html>

var Tr=document.createElement("tr")

Tr.innerHTML="移到这里来!"

Tr.onmouseover=function()

{

this.style.backgroundColor='#e1e8fb'

alert(1)

}

var Table=document.getElementById("table的id")//或者是其他的方式获取的Table对象。

Table.appendChild(Tr)

上面的代码就可以了


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11574624.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存