0

Здравствуйте, у меня есть таблица и я в ней подсвечиваю определенные ячейки разными цветами с помощью добавления класса, но как только добавляю класс для ячейки tr:hover перестает подсвечивать эти ячейки. Заранее благодарен за помощь.

tr:hover { background-color: rgba(108, 10, 119, 0.71); cursor: default; }

.green {
    background-color: green;
}

.red {
    background-color: red;
}
<table id="myTable" class="tablesorter">
    <thead>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>status</th>
        
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Smith</td>
        <td>John</td>
        <td>empty</td>
        
    </tr>
    <tr>
        <td>Bach</td>
        <td>Frank</td>
        <td class="green">green</td>  
    </tr>
    <tr>
        <td>Doe</td>
        <td>Jason</td>
        <td class="red">red</td>
       
    </tr>
    
    </tbody>
</table>

2 ответа 2

2

Подсвечивайте не tr, а td.

Ваша проблема заключается в том, что td лежит поверх tr и перекрывает его. Чтобы было наглядно, сделайте прозрачный фон для .red или .green и наведите курсор на строку. Увидите, что цвет смешается.

tr:hover td { background-color: rgba(108, 10, 119, 0.71); cursor: default; }

.green {
    background-color: green;
}

.red {
    background-color: red;
}
<table id="myTable" class="tablesorter">
    <thead>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>status</th>
        
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Smith</td>
        <td>John</td>
        <td>empty</td>
        
    </tr>
    <tr>
        <td>Bach</td>
        <td>Frank</td>
        <td class="green">green</td>  
    </tr>
    <tr>
        <td>Doe</td>
        <td>Jason</td>
        <td class="red">red</td>
       
    </tr>
    
    </tbody>
</table>

1

   

.green {
    background-color: green;
}

.red {
    background-color: red;
}

tr:hover, tr:hover .green, tr:hover .red{ background-color: rgba(108, 10, 119, 0.71); cursor: default; }
<table id="myTable" class="tablesorter">
    <thead>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>status</th>
        
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Smith</td>
        <td>John</td>
        <td>empty</td>
        
    </tr>
    <tr>
        <td>Bach</td>
        <td>Frank</td>
        <td class="green">green</td>  
    </tr>
    <tr>
        <td>Doe</td>
        <td>Jason</td>
        <td class="red">red</td>
       
    </tr>
    
    </tbody>
</table>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.