Question

当我将鼠标悬停在tr上时，我需要更改按钮的颜色，例如将鼠标悬停在第一行上时，其中的按钮应具有与其他按钮不同的背景颜色。
这个HTML代码：

   <tr onmouseover="hoverMe()" onmouseout="outMe()">
    <input type="button" class="btn-table-book" value="book">
    </tr>
  <tr onmouseover="hoverMe()" onmouseout="outMe()">
    <input type="button" class="btn-table-book" value="book">
    </tr>
   <tr onmouseover="hoverMe()" onmouseout="outMe()">
    <input type="button" class="btn-table-book" value="book">
    </tr>

java脚本代码

<script>
     function hoverMe(){
            $(".btn-table-book").css("background-color","#F0562B");
         $(".btn-table-book").css("color","#FFF");};
  function outMe(){

         $(".btn-table-book").css("background-color","#DDD");
         $(".btn-table-book").css("color","#222");
       };

当我在同时将鼠标悬停在任何tr所有按钮的颜色变化上时运行此代码后，我不需要这样做。

Answer 1

:hover不必位于选择器的最后一个元素上。以下是在纯CSS中如何做到这一点：

tr .btn-table-book {
    background-color: #DDD;
    color: #222;
}
tr:hover .btn-table-book {
    background-color: #F0562B;
    color: #FFF
}

Answer 2

如果我理解你的问题，你需要的是：

$('#tableId').find('tr').each(function(i){
     $(this).css("background-color","#DDD");
     $(this).css("color","#FFF");

     $(this).hover(function(){
          $(this).css("background-color","#F0562B");
          $(this).css("color","#222");
     });
  });

这将在第一个元素内部循环，它会将悬停函数添加到tr元素的每个元素上。

如何检测js中的每个tr？

2 个答案: