PHP＆CSS：如何獲得表格的每一行的懸停效果？

我使用此代碼來顯示事件。每個事件都是可點擊的，但我真的需要一個背景色懸停效果。也許這也可能沒有JavaScript？PHP＆CSS：如何獲得表格的每一行的懸停效果？

<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; 
}

來源

2012-09-04 John Smith

是'TR：hover'工作不適合你？ – Brad

我想你的意思是'tr：hover'。他說每一行，而不是每個單元格。 – Mike

@Mike，已編輯，謝謝。 – Brad

試試這個：

從td取出class='row_{$row}'並把它tr標籤
然後更換你的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; 
}

來源

2012-09-04 01:29:01 timidboy

謝謝你。一個小問題：是否可以刪除_onclick_-JavaScript？對我來說這是一個糟糕的解決方案。如果禁用JavaScript，則無法點擊鏈接。 –

我知道一種方法：在每個「td」中放一個'a'標記。不是最好的解決方案，但至少它將工作W/O JavaScript。：P – timidboy

我明白了，它並不完美，因爲它只能在文本上點擊，因爲如果JavaScript被禁用，填充區域不可點擊。但總比沒有好。如果有人知道更好的解決方案：隨時發佈。謝謝！ –

使用CSS：

tr:hover { background: #CCC; }

來源

2012-09-04 00:42:36 jtheman

我試過了： '.tableLine tr：hover {background-color：＃990000; } ' 這不適合我。 –

您使用的是舊版本的Internet Explorer嗎？ – ceejayoz

Firefox 15 - > **沒有工作**
–

嘗試使用CSS

table tr:hover{background:#eee;}

來源

2012-09-04 00:42:58

如果你也想強調每一列，以及你可以給每列TD唯一的類使用的東西作爲下面。（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")}); 
    });

來源

2012-09-04 00:49:50 Wagaweze

我不懷疑這會起作用，但爲什麼你會使用臃腫的jQuery做懸停簡單的背景更改？ – Mike

@Mike我無法找到一種方法來突出顯示僅使用html和css的列。如果有任何方法，請讓我知道。 – Wagaweze

該OP表示「行」而不是「列」。 – Mike

PHP＆CSS：如何獲得表格的每一行的懸停效果？

回答

相關問題