Question

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

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

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

Answer 1

无法使用CSS。你可以使用JS。以下是使用jQuery的示例。

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

DEMO

Answer 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>

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

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

3 个答案: