<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>上机练习</title>
<style type="text/css">
td{border-style:solid;border-width;1px;font-size:200%;}
td:hover{background-color:cyan;)
#hoverResult{color:green;font-size:200%;}
</style>
</head>
<body>
<section>
<table>
<tr>
<td>1</td>
<td>一个人生活</td>
<td>温岚</td>
</tr>
<tr>
<td>2</td>
<td>让我爱你</td>
<td>胡夏</td>
</tr>
</table>
<button type="button" id="findHover" autofocus>查看鼠标焦点目标位置</button>
<div id="hoverResult"></div>
<script type="text/javascript">
document.getElementById("findHover").οnclick=function(){
var hovered=document.querySelector("td:hover");
if(hovered)
document.getElementById("hoverResult").innerHTML=hovered.innerHTML;
}
</script>
</section>
</body>
</html>
Seletors API应用
最新推荐文章于 2024-04-27 08:44:56 发布