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：如何获得表格的每一行的悬停效果？

回答

相关问题