0

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

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

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

4

3 回答 3

7

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

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

演示

于 2012-07-06T18:22:22.330 回答
0

这是我的最终解决方案：

<!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>
于 2012-07-06T19:13:02.033 回答
0 
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;
}
于 2017-12-15T10:49:00.480 回答