テーブル内のTDの部分にマウスをのせるとTD背景の色が変わり、文字色も変わり、そのTD部分をクリックすると別窓でリンクを開くようにするにはどうすればいいのでしょうか。
No.4
122
17
51pt
JavaScriptを切っている人もきっといますから・・・
こうするとCSSだけでできました（Firefoxで確認）。
42
37
<style type="text/css">
table, td{
border:1px solid black;
padding:0;
}
.tdlink a{
height:100%;
display:block;
padding:5px;
}
.tdlink a:hover{
color:white;
background:skyblue;
}
</style>
<table>
<tr>
<td class="tdlink"><a href="http://q.hatena.ne.jp/" target="_blank">人力検索はてな</a></td>
<td class="tdlink"><a href="http://q.hatena.ne.jp/list" target="_blank">人力検索はてな<br>質問一覧</a></td>
</tr>
</table>
No.1
1504493
25pt
マウスを乗せると色が変わるようにするには、CSSでhoverを設定します。
別窓でリンクの部分がよくわからないのですが、aタグのリンクがある場合は< a target="_blank"にすればいいです。
下のサンプルでは純粋にtdをクリックした場合に別窓が開くようにしました。onclick属性を使わず< script>で汎用的に書くことも出来ます。
デモ： http://jsfiddle.net/BPG45/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
</script>
<style>
table, td {
border: 1px solid black;
}
td:hover {
background-color: pink;
color: red;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td onclick="javascript:window.open('http://www.google.co.jp/')">a</td>
<td onclick="javascript:window.open('http://q.hatena.ne.jp/1308468173')">b</td>
</tr>
</tbody>
</table>
</body>
</html>
No.2
26251149
25pt
【１】マウスをのせると背景の色が変わり、文字色も変わり
スタイルでhoverを用います
下記では、td全てが対象の場合をまずは指定し、次にclass="a"の場合を指定し、最後にid="b"の場合を指定しています
<html> <head> <style> td { color:red; background-color:blue; } td:hover { color:blue; background-color:red; } td.a { color:black; background-color:white; } td.a:hover { color:white; background-color:black; } #b { color:pink; background-color:yellow; } #b:hover { color:yellow; background-color:pink; } </style> </head> <body> <table> <caption>表</caption> <thead> <tr><th>見出し１</th><th>見出し２</th></tr> </thead> <tbody> <tr> <td>データ１の１</td> <td class="a">データ１の２</td> </tr> <tr> <td>データ２の１</td> <td class="a">データ２の２</td> </tr> <tr> <td id="b">データ３の１</td> <td>データ３の２</td> </tr> </tbody> </table> </body> </html>
【２】クリックすると別窓でリンクを開く
スクリプトを使います
<td onclick="javascript:window.open('URL')">データ１の１</td>
ウィンドウの大きさなども指定できますので、上記で開くことが確認できたら、下記のページを参照してみてください
No.3
787
25pt
IEの場合ですが、styleのhoverは使えませんのでJavaScriptで
<td onmouseover="javascript:this.style.backgroundColor='#ff0'" onmouseout="javascript:this.style.backgroundColor=''">
onmouseOverとonmouseOutで設定する必要があります。
No.4
12217
ここでベストアンサー
51pt
JavaScriptを切っている人もきっといますから・・・
こうするとCSSだけでできました（Firefoxで確認）。
<style type="text/css">
table, td{
border:1px solid black;
padding:0;
}
.tdlink a{
height:100%;
display:block;
padding:5px;
}
.tdlink a:hover{
color:white;
background:skyblue;
}
</style>
<table>
<tr>
<td class="tdlink"><a href="http://q.hatena.ne.jp/" target="_blank">人力検索はてな</a></td>
<td class="tdlink"><a href="http://q.hatena.ne.jp/list" target="_blank">人力検索はてな<br>質問一覧</a></td>
</tr>
</table>
ご回答ありがとうございます。完璧にできました。ほんとうにありがとうございました。
うぃんど
2011/06/19 17:37:15
1
1
1
ご回答ありがとうございます。完璧にできました。ほんとうにありがとうございました。