我如何避免活动和悬停背景

Question

我有一种情况可以突出显示每个悬停行，但是活动行具有相同的背景，如下所示合并起来

活动状态和悬停状态合并如下所示：

问题：如上图所示，活动图像和悬停图像混合在一起。

这是我的jsfiddle： https://jsfiddle.net/dB93J/4212/

以下是我的代码：

$('tbody tr').on('click',function(){
   $('tbody tr').removeClass('active-class');
   $(this).addClass('active-class');
});

.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

tbody tr:hover{
   background:#ccc;
}

.active-class{
   background:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="zui-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Height</th>
            <th>Born</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>DeMarcus Cousins</td>
            <td>C</td>
            <td>6'11"</td>
            <td>08-13-1990</td>
            <td>$4,917,000</td>
        </tr>
        <tr>
            <td>Isaiah Thomas</td>
            <td>PG</td>
            <td>5'9"</td>
            <td>02-07-1989</td>
            <td>$473,604</td>
        </tr>
        <tr>
            <td>Ben McLemore</td>
            <td>SG</td>
            <td>6'5"</td>
            <td>02-11-1993</td>
            <td>$2,895,960</td>
        </tr>
        <tr>
            <td>Marcus Thornton</td>
            <td>SG</td>
            <td>6'4"</td>
            <td>05-05-1987</td>
            <td>$7,000,000</td>
        </tr>
        <tr>
            <td>Jason Thompson</td>
            <td>PF</td>
            <td>6'11"</td>
            <td>06-21-1986</td>
            <td>$3,001,000</td>
        </tr>
    </tbody>
</table>

Answer 1

我建议将.active-class选择器的背景颜色更改为较深的阴影，并将tbody tr:hover选择器的背景颜色更改为较浅的阴影。请参阅随附的示例。我使用https://www.color-hex.com/查找十六进制代码和阴影。

$('tbody tr').on('click',function(){
   $('tbody tr').removeClass('active-class');
   $(this).addClass('active-class');
});

.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

tbody tr:hover{
   background:#dbdbdb;
}

.active-class{
   background:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="zui-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Height</th>
            <th>Born</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>DeMarcus Cousins</td>
            <td>C</td>
            <td>6'11"</td>
            <td>08-13-1990</td>
            <td>$4,917,000</td>
        </tr>
        <tr>
            <td>Isaiah Thomas</td>
            <td>PG</td>
            <td>5'9"</td>
            <td>02-07-1989</td>
            <td>$473,604</td>
        </tr>
        <tr>
            <td>Ben McLemore</td>
            <td>SG</td>
            <td>6'5"</td>
            <td>02-11-1993</td>
            <td>$2,895,960</td>
        </tr>
        <tr>
            <td>Marcus Thornton</td>
            <td>SG</td>
            <td>6'4"</td>
            <td>05-05-1987</td>
            <td>$7,000,000</td>
        </tr>
        <tr>
            <td>Jason Thompson</td>
            <td>PF</td>
            <td>6'11"</td>
            <td>06-21-1986</td>
            <td>$3,001,000</td>
        </tr>
    </tbody>
</table>

Answer 2

如果您无法更改hover或active的颜色，则可以增加.active-class上边框的宽度，以使分隔更加清晰。

$('tbody tr').on('click',function(){
   $('tbody tr').removeClass('active-class');
   $(this).addClass('active-class');
});

.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

tbody tr:hover{
   background:#ccc;
}

.active-class{
   background:#ccc;
   border: solid 4px #DDEEEE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="zui-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Height</th>
            <th>Born</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>DeMarcus Cousins</td>
            <td>C</td>
            <td>6'11"</td>
            <td>08-13-1990</td>
            <td>$4,917,000</td>
        </tr>
        <tr>
            <td>Isaiah Thomas</td>
            <td>PG</td>
            <td>5'9"</td>
            <td>02-07-1989</td>
            <td>$473,604</td>
        </tr>
        <tr>
            <td>Ben McLemore</td>
            <td>SG</td>
            <td>6'5"</td>
            <td>02-11-1993</td>
            <td>$2,895,960</td>
        </tr>
        <tr>
            <td>Marcus Thornton</td>
            <td>SG</td>
            <td>6'4"</td>
            <td>05-05-1987</td>
            <td>$7,000,000</td>
        </tr>
        <tr>
            <td>Jason Thompson</td>
            <td>PF</td>
            <td>6'11"</td>
            <td>06-21-1986</td>
            <td>$3,001,000</td>
        </tr>
    </tbody>
</table>

Answer 3

同意。有点混乱，但是我建议您只更改悬停类或活动类的颜色，以避免您似乎看到的混乱。只要确保十六进制颜色的长度相同即可（两个长度均为3位或两个长度均为6位，使用不同的长度可能会混淆渲染）。 IE：

tbody tr:hover{
   background:#d7d;
}
.active-class{
   background:#ccc;
}

希望这会有所帮助！

Answer 4

我不确定我是否理解正确，但是您正在元素调用.active-class中使用与tr:hover相同背景色的类。

因为:hover选择器：The :hover selector can be used on all elements...这意味着每个元素（包括具有.active-class类的元素）也将具有悬停选择器。

换句话说，将.active-class（或tr：hover）分配给该元素时，避免活动和悬停混合在一起的唯一方法是更改​​背景颜色或元素的样式。

希望这会有所帮助。