0

私は webapp を実行しており、ウィケット 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 に答える