Question

我正在尝试使用jquery来处理这两种情况。基本上我想要的功能是当你将鼠标悬停在它们上面时要突出显示的表行，但是当你点击一个特定行以转换比悬停突出显示颜色更深的颜色时。这是我目前的代码

$("tr").not(':first').hover(
  function() {
    $(this).css("background", "#FFEFC6");
  },
  function() {
    $(this).css("background", "");
  }
);

$("tr").click(function(e) {
  $(this).css("background-color", "#ffd659");
});

我遇到的问题是，当我点击一行时，它会变成较暗的颜色，但如果我将鼠标悬停在此行之外，它将恢复为透明背景。

Answer 1

使用CSS，无需使用JavaScript进行悬停所以只需点击

切换课程

＆＃13;

$("tbody").on("click", "tr", function(e) {     
  $(this)
     .toggleClass("selected")
     .siblings(".selected")
         .removeClass("selected");
});

＆＃13;

table { width: 50% }
tbody tr:hover.selected td,
tbody tr:hover td {
  background-color: #FFEFC6;
  cursor: pointer;
}
tbody tr.selected td {
  background-color: #ffd659;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

$("tr").not(':first').hover(
   function() {
        if(!$(this).hasClass("sel"))
              $(this).css("background", "#FFEFC6");
  },
  function() {
     if(!$(this).hasClass("sel"))
        $(this).css("background", "");
  }
);

$("tr").click(function(e) {
    $(this).css("background-color", "#ffd659");
    $(this).addClass("sel");
});

你的css可以。

td
{
    width:40px;

}

sel
{
background-color:#ffd659

}

JS小提琴：http://jsfiddle.net/szup0x8k/9/

表格行在悬停时突出显示并在点击时更改颜色

2 个答案: