悬停时表格单元格边框更改答案

【问题标题】：table cell border change on hover悬停时表格单元格边框更改
【发布时间】：2012-07-06 18:18:42
【问题描述】：

我正在做一个 webapp，我有一个由 wicket ListView 生成的表格。该应用程序所做的是，当鼠标悬停在一个单元格上时，该应用程序将通过 ajax 填充一个信息面板，我想要的是更改单元格边框，以便用户可以知道信息与哪个单元格相关。目前我在css中有以下代码。（scroll-content-item 是表格的类）

scroll-content-item td:hover{
border-style:outset;
border-width:5px;
border-color:#0000ff;}

这确实会在悬停时提供边框，但是一旦用户将鼠标移到单元格之外，边框就会消失。我想要的是一种只要鼠标不移动到另一个单元格就可以使边框保持不变的方法。有什么办法可以让边框一直保持到鼠标移动到另一个单元格上？我很感激任何建议。

【问题讨论】：

一旦用户将鼠标移到单元格之外，边框就消失了。我想要的是一种只要鼠标不移动到另一个单元格就可以使边框保持不变的方法。我不明白你想要什么。
@LT_Chen 这可以使用 JavaScript 完成，但不能使用纯 css :(
说有一个表格行 1 2 ，我想要的是当鼠标移到1时，a边框被添加到一个。您可以将鼠标移到页面上除 2 之外的任何其他位置，并且边框保持在那里。当鼠标在 2 上时，1 上的边框消失，并在 2 上添加一个边框
@ShivKumarGanesh 你能给我一些帮助吗？
@LT_Chen 已经有人发了演示 :)

标签： html css wicket

【解决方案1】：

不能用 CSS 做到这一点。不过你可以使用 JS。这是一个使用 jQuery 的示例。

$("td").hover(function() {
    $("td").removeClass('highlight');
    $(this).addClass('highlight');
});

DEMO

【讨论】：

这和使用td:hover {border: 1px solid #ccc;}不一样
没有。 :hover 将消除鼠标移出的影响。当您将鼠标悬停在其他东西上时，这将消除效果。
这不是 op 想要的吗？你的例子不就是这样吗？
哦，我想我明白了。所以首先它删除所有 td 元素的类，然后将类添加到当前 td。谢谢，我会试一试。
OP 想要我的示例所做的。不是 CSS 单独可以做到的。 OP希望当您鼠标悬停时效果保持不变，并且仅在您将鼠标悬停在另一个td上时才会改变。 CSS 移除鼠标移出的效果

【解决方案2】：

这是我的最终解决方案：

<!DOCTYPE HTML>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <style>
  .highlight{
    border-style:outset;
    border-width:3px;
    border-color:#0000ff;
  }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("td").hover(function(){
      $("td").removeClass('highlight');
      $(this).addClass('highlight');
    });
  });
  </script>
</head>
<body>
  <table class="waypointsTable" border="1">
    <tbody>
      <tr>
        <td>some text</td>
        <td>some text</td>
        <td>some text</td>
        <td>some text</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

【讨论】：

好吧，我只是愚蠢..只是通过将 $(document).load 更改为 $(document).ready 来解决这个问题

【解决方案3】：

table {
    border-collapse: collapse;
}
td {
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: none;
    border-bottom: none;
}

tr td:last-child {
    border-right: 1px solid black;
}

tr:last-child td {
    border-bottom: 1px solid black;
}

td:hover {
    border: 1px solid red !important;
}

【讨论】：