html练习

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<style type="text/css">
td{
	border-style:solid;
	border-width:1px;
	font-size:300%;
}
td:hover{
	background-color:cyan;
}
#hoverResult{
	color:gren;
	font-size:200%;
}
</style>
</head>
<body>
	<section>
		<table>
			<tr>
				<td>A1</td><td>A2</td><td>A3</td>
			<tr></tr>
				<td>A1</td><td>A2</td><td>A3</td>
			<tr></tr>
				<td>A1</td><td>A2</td><td>A3</td>
			</tr>
		</table>
		<div> Foucs The Button.Hover over the talb ecessl. and hit Enter to identity tem using querySelector('td:hover').</div>
		<button type="button" id="findHover" autofocus>Find 'td:hover' target </button>
		<div id="hoverResult">1111</div>
			<script type="text/javascript">
				document.getElementById("findHover").onclick=function(){
					var hovered=document.querySelector("td");
					alert(hovered);
					if(hovered){
						document.getElementById("hoverResult").innerHTML=hovered.innerHTML;
					}
				}
			</script>
		</section>
	
</body>
</html>

你可能感兴趣的:(html)