javascript - PHPとCSS：テーブルの各行のホバー効果を取得するにはどうすればよいですか？

Question

このコードを使用してイベントを表示しています。すべてのイベントはクリック可能ですが、これには背景色のホバー効果が本当に必要です。たぶんそれはJavaScriptなしでも可能ですか？

<table class="tableLine">
<tr>
<th>Wann?</th>
<th>Was?</th>
<th>Wer?</th>
<th>Wo?</th>
</tr>

<?php
$all_events = array();
$ten_events = array();

for($i = 0; $events = mysql_fetch_object($events_resource); $i++){

if($i < 9){

    $ten_events[] = $events;

}

$all_events[] = $events;

}  

$i = 0;

foreach($ten_events as $event){ 

$row = $i % 2;

echo "<tr onclick=\"window.location.href = '?page=single_event&amp;id=$event->id'\" style=\"cursor: pointer;\">
        <td class='row_{$row}'>{$event->de_date}</td></a>
        <td class='row_{$row}'>{$event->category}</td>
        <td class='row_{$row}'>{$event->who}</td>
        <td class='row_{$row}'>{$event->location}</td>
      </tr>";

$i++;

} 
?>

CSS

これが私のCSSコードです。

.tableLine {
font-family: Verdana,Arial,sans-serif;
font-weight: normal;
font-size: 10px;
width: 614px;
border: 0;
padding: 0;
border-spacing: 0;
text-align: left;
}

.tableLine th {
background-color: #990000;
color: #f3f2ea;
font-weight: bold;
}

.row_0 {
background-color: #424140;
padding: 3px 5px 3px 5px;
color: #f3f2ea;
}

.row_1 {
background-color: #555352;
padding: 3px 5px 3px 5px;
color: #f3f2ea;
}

.tableLine tr:hover {
background: #990000;
}

Answer 1

CSSを使用する：

 tr:hover { background: #CCC; } 

Answer 2

これを試して：

1. class='row_{$row}'から削除し、タグtdに配置しますtr
2. 次に、cssのこの部分を置き換えます。

/ ** /

.row_0 {
background-color: #424140;
padding: 3px 5px 3px 5px;
color: #f3f2ea;
}

.row_1 {
background-color: #555352;
padding: 3px 5px 3px 5px;
color: #f3f2ea;
}

これとともに：

.row_0 {
   background-color: #424140;
}

.row_1 {
   background-color: #555352;
}

.row_0:hover, .row_1:hover {
   background-color: #EEE; /* highlight row */
}

.tableLine tr td {
   padding: 3px 5px 3px 5px;
   color: #f3f2ea;
}

Answer 3

各列も強調表示する場合は、各列に一意のクラスを指定して、次のように使用できます。（jQuery）

$("td").hover(
    // Mouse Over Function
    function () {
        $('.'+$(this).attr('class')).each(function() {
            $(this).css("background","#FAFAFA");
        });
        $(this).parent().children("td").each(function() {$(this).css("background","#FAFAFA")});
        $(this).css("background","#FAEEFA");
    },
    // Mouse Out Function
    function () {
        $('.'+$(this).attr('class')).each(function() {
            $('.'+$(this).attr('class')).css("background","#FFFFFF");
        });
        $(this).parent().children("td").each(function() {$(this).css("background","#FFFFFF")});
    });

Answer 4

使ってみてくださいCSS

table tr:hover{background:#eee;}​