ホバー上のテーブル行の背景色を変更する

Question

テーブルの行にカーソルを置いて半透明のオーバーレイを実現したいのですが、ここで少しDEMOを作成しました。

しかし、私はテキストが何らかの形で変わることを望んでいないので、ちょうど背景と私がそれをオーバーレイのようなものにしたい理由は、セルを少し濃くしたいホバー上で同じ色。理にかなっている？

コード：

<table id="compTable" class="prTable"> 
    <tr class="prTableHeader"> 
     <th></th> 
     <th></th> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
    </tr> 
    <tr class="prTableRow"> 
     <td class="prExerVariNameTD blackColor">Squat</td> 
     <td class="prVerticalSpace"></td> 
     <td class="prTableCell" title="@finalDate">100</td> 
     <td class="prTableCell" title="@finalDate">100</td> 
     <td class="prTableCell" title="@finalDate">100</td> 
    </tr> 
</table> 

CSS

.prTableCell { 
    padding: 7px; 
    width: 60px; 
    text-align:center; 
    border:1px solid #e1e1e1; 
    cursor:default; 
} 

.prExerVariNameTD { 
    width: 200px; 
    border:1px solid #e1e1e1!important; 
    padding: 5px 5px 5px 10px; 
    background-color: white; 
} 

.prVerticalSpace { 
    width: 50px; 
} 

.rowHover { 
    /*background: rgba(204, 204, 204, 0.5);*/ 
    opacity: 0.5; 
} 

スクリプト：私が正しくあなたを理解していた場合

$(document).ready(function() { 
    $("table#compTable .prTableCell:even").css("background-color", "#eeeeee"); 
    $("table#compTable .prTableCell:odd").css("background-color", "White"); 

    $(".prTableRow").hover(function() { 
     $(this).toggleClass("rowHover"); 
    }); 
}); 

Answer 1

のJavaScriptの必要はありません。レスキューにCSS！

これは、ホバーの背景色を少し暗く設定します。あなたは実際の色の値で遊ぶことができます色を濃くするか、軽くホバリングします。

.prTableCell { 
 
    padding: 7px; 
 
    width: 60px; 
 
    text-align: center; 
 
    border: 1px solid #e1e1e1; 
 
    cursor: default; 
 
} 
 

 
.prExerVariNameTD { 
 
    width: 200px; 
 
    border: 1px solid #e1e1e1!important; 
 
    padding: 5px 5px 5px 10px; 
 
    background-color: white; 
 
} 
 

 
.prVerticalSpace { 
 
    width: 50px; 
 
} 
 

 
.prTableCell:nth-child(even) { 
 
    background-color: #eee; 
 
} 
 

 
.prTableCell:nth-child(odd) { 
 
    background-color: #fff; 
 
} 
 

 
.prTableRow:hover .prTableCell:nth-child(even) { 
 
    background-color: #ddd; 
 
} 
 

 
.prTableRow:hover .prTableCell:nth-child(odd) { 
 
    background-color: #eee; 
 
}

<table id="compTable" class="prTable"> 
 
    <tr class="prTableHeader"> 
 
    <th></th> 
 
    <th></th> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    <th>3</th> 
 
    </tr> 
 
    <tr class="prTableRow"> 
 
    <td class="prExerVariNameTD blackColor">Squat</td> 
 
    <td class="prVerticalSpace"></td> 
 
    <td class="prTableCell" title="@finalDate">100</td> 
 
    <td class="prTableCell" title="@finalDate">100</td> 
 
    <td class="prTableCell" title="@finalDate">100</td> 
 
    </tr> 
 
</table>

Answer 2

、あなたはそれを除いて（あなたのrgba背景と非常に接近していましたセルではなく行をターゲットにしていました）。これはあなたが探しているものですか？

$(document).ready(function() { 
 
    $("table#compTable .prTableCell:even").css("background-color", "#eeeeee"); 
 
    $("table#compTable .prTableCell:odd").css("background-color", "White"); 
 

 
    $(".prTableRow").hover(function() { 
 
     $(this).toggleClass("rowHover"); 
 
    }); 
 
});

.prTableCell { 
 
    padding: 7px; 
 
    width: 60px; 
 
    text-align:center; 
 
    border:1px solid #e1e1e1; 
 
    cursor:default; 
 
} 
 

 
.prExerVariNameTD { 
 
    width: 200px; 
 
    border:1px solid #e1e1e1!important; 
 
    padding: 5px 5px 5px 10px; 
 
    background-color: white; 
 
} 
 

 
.prVerticalSpace { 
 
    width: 50px; 
 
} 
 

 
.rowHover td:not(.prVerticalSpace) { 
 
    background: rgba(204, 204, 204, 0.5) !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="compTable" class="prTable"> 
 
    <tr class="prTableHeader"> 
 
     <th></th> 
 
     <th></th> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
    </tr> 
 
    <tr class="prTableRow"> 
 
     <td class="prExerVariNameTD blackColor">Squat</td> 
 
     <td class="prVerticalSpace"></td> 
 
     <td class="prTableCell" title="@finalDate">100</td> 
 
     <td class="prTableCell" title="@finalDate">100</td> 
 
     <td class="prTableCell" title="@finalDate">100</td> 
 
    </tr> 
 
</table>

Answer 3

annswerでhttps://jsfiddle.net/v9jphr5h/

tr:nth-child(2n) 
{ 
    background-color:#ffe; 
} 

tr:nth-child(n+2):hover>td, 
tr:nth-child(n+2):hover>td.prTableCell[title]{ 
    background: rgba(204, 204, 204, 0.5) 
} 

ボトムライン： - あなたのRGBA-アプローチは 作品 - jqueryの のために絶対に必要はありません - （あなたはとの互換性にしない限りしかし、その場合、rgba eithterを使うことはできません。その場合は、すべてのセルの色を計算し、「奇数」と「偶数"行をクラスに変換します）