javascript - 我如何检测js中的每个tr？

Question

当我将鼠标悬停在 tr 上时，我需要更改按钮的颜色，例如，当鼠标悬停在第一行上时，其中的按钮应该具有与其他按钮不同的背景颜色。< br/> 此 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
}