PHP & CSS：如何为表格的每一行获得悬停效果？

Posted 2023-03-06

【中文标题】PHP & CSS：如何为表格的每一行获得悬停效果？

【英文标题】：PHP & CSS: How to get hover effect for each row of a table?

【发布时间】：2012-08-28 15:20:28

【问题描述】：

我正在使用此代码来显示事件。每个事件都是可点击的，但我真的需要一个背景色悬停效果。也许没有 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;

【问题讨论】：

tr:hover 不适合你吗？

我想你的意思是tr:hover。他说的是每一行，而不是每个单元格。

@Mike，已编辑，谢谢。

我更新了两个代码。我为 tableline-class 尝试了 tr:hover，但它不起作用。

我添加了 tr:hover 代码，但它不起作用。

【参考方案1】：

使用 CSS：

 tr:hover  background: #CCC;  

【讨论】：

我试过了：.tableLine tr:hover background-color: #990000; 这对我不起作用。

您使用的是旧版本的 Internet Explorer 吗？

【参考方案2】：

试试这个：

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

【讨论】：

谢谢。一个小问题：是否可以删除这个 onclick-JavaScript？这对我来说是一个糟糕的解决方案。如果 JavaScript 被禁用，任何人都无法点击链接。

我知道一种方法：在每个td 中放置一个a 标签。不是最好的解决方案，但至少它可以在没有 javascript 的情况下工作。 :P

我明白了，它并不完美，因为它只能在文本上点击，因为如果禁用 JavaScript，则填充区域不可点击。但总比没有好。如果有人知道更好的解决方案：请随时发布。谢谢！

也许您可以将填充添加到a 标记，而不是在td 中设置填充？

因为锚标签默认是内联元素。您需要将其display 样式设置为block。

【参考方案3】：

尝试使用CSS

table tr:hoverbackground:#eee;​

【参考方案4】：

如果您还想突出显示每一列，您可以为每一列 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"));
    );

【讨论】：

我不怀疑这会起作用，但是你为什么要使用臃肿的 jQuery 来做一个简单的悬停背景更改？

@Mike 我找不到仅使用 html 和 css 突出显示该列的方法。如果有办法请告诉我。

OP 说的是“行”而不是“列”。

是的，但是答案已经给出了，尽管我会增加一些价值。请注意，我以“如果您也...”开头，只是认为有一天有人会发现它有帮助