サンプル：
http://html5next.appspot.com/html5js.html
html5ソース：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Query Selector デモ</title>
<style type="text/css">
td {
border-style: solid;
border-width: 1px;
font-size: 300%;
}
td:hover {
background-color: cyan;
}
#hoverResult {
color: green;
font-size: 200%;
}
</style>
</head>
<body>
<section>
<!-- create a table with a 3 by 3 cell display -->
<table>
<tr>
<td>A1</td> <td>A2</td> <td>A3</td>
</tr>
<tr>
<td>B1</td> <td>B2</td> <td>B3</td>
</tr>
<tr>
<td>C1</td> <td>C2</td> <td>C3</td>
</tr>
</table>
<div>下記のボタンにフォーカスを与えてから、マウスでテーブルセルの上に置いて【Enter】キーを押してください。【querySelector('td:hover')を利用】</div>
<button type="button" id="findHover" autofocus>'td:hover'を検索する</button>
<div id="hoverResult"></div>
<script type="text/javascript">
document.getElementById("findHover").onclick = function() {
// find the table cell currently hovered in the page
var hovered = document.querySelector("td:hover");
if (hovered)
document.getElementById("hoverResult").innerHTML = hovered.innerHTML;
}
</script>
</section>
</body>
</html>
0 件のコメント:
コメントを投稿