表格行作为锚点答案

【问题标题】：table row as anchor表格行作为锚点
【发布时间】：2013-09-13 20:43:57
【问题描述】：

我正在尝试将整个表格行设置为锚点。我在这里读到，将所有表格行内容放在锚标记内不是一个好习惯，因为 html 标准不允许这样做。

实现这一目标的最佳策略是什么？

我正在分析在每个表格单元格中放置一个锚标记的可能性，就像我在这个示例中对 .day div 所做的那样：http://jsfiddle.net/XdfCp/4/ 这是一个好的解决方案吗？

这个解决方案的问题是锚没有覆盖所有的表格单元格空间。我已经以这种方式配置了锚点，但它并没有占用所有单元格空间：

    #ListaEventosPorMes a{
        display: block;
        width: 100%;
        height: 100%;
        color: White;
    }

我需要的另一个行为是在所有行中而不是在特定的表格单元格锚点上获得悬停效果。你有什么办法解决这个问题吗？

【问题讨论】：

你需要为链接使用锚点，还是仅仅为了 CSS 悬停效果？
那么您可以在表格行上创建一个 javascript onclick 事件，而不是将整行放在 a 标记中？（并且仍然有一个用于 SEO 的标签）
是的，我可以！如果我这样做，是否不需要将锚点放在每个表格单元格中？我认为这是最好的解决方案。我该怎么做？

标签： html css

【解决方案1】：

自 IE7 以来的所有主要浏览器都支持所有元素上的 :hover CSS 伪类，包括 tr，因此您无需使用锚来设置悬停状态的样式。

至于你的其他问题，看看这个答案：Make link in table cell fill the entire row height

【讨论】：

我已经做到了。 jsfiddle.net/XdfCp/7 但是这样一来，主播的hover就不生效了。它看到我应用的baground color（rgba（114,40,39,0.8））在元素后面。当我将悬停设置到我的 li 标签时也会出现这种效果。
在这种情况下，不要使用锚点的悬停 - 使用表格行进行悬停效果，例如：tr:hover { background: rgba(114,40,39,0.8); }
当我将鼠标悬停在 li （这是我的行元素）上时也会发生这种情况。
看看jsfiddle.net/XdfCp/7我用的不是html表格，而是div+display:table。
您没有看到背景颜色更新的原因是因为您在内部元素#ListaEventosPorMes .detalhes 上设置了背景颜色，该元素显示在 li 上。让它不可见，你就会看到悬停行为。

【解决方案2】：

我不确定您要对锚点做什么。我有一个用于显示 SQL 表行的表。当 PHP 创建表时，它会在每个行标题中插入一个onclick，并将行的索引作为参数。没有使用锚。

while ($row = mysql_fetch_array($result)) {
    $id = $row['resv_id'];
    $funct_call="Edit_Row($id)";
    echo "<tr " . "onclick=$funct_call" .  " >";
}

onclick 函数体是：

var target="./entry_form.php?submit=Edit&resv_id=index_num";
window.open( target.replace("index_num",id),'_self' );

【讨论】：

【解决方案3】：

在行的每个 td 内放置一个锚标签，并在锚标签内放置一个 div 但是你需要给它一个高度（最好给它一个最小高度，好像内容需要扩展一样）

.link {
width:100%;
min-height:100px; /**For example**/

}
<tr>
  <td><a><div class="link"></div></a></td>
  <td><a><div class="link"></div></a></td>
  <td><a><div class="link"></div></a></td>
</tr>

【讨论】：