Bootstrap에서 마우스 오버 테이블의 마우스 오버 색상을 어떻게 변경합니까?

'table-hover'클래스가있는 테이블이 있습니다. 색상 위로 마우스를 가져가는 기본 색상은 흰색 / 연한 회색입니다. 이 색상을 어떻게 변경합니까?

내 지배적 인 스타일 시트에 다음을 추가하여 기본값을 덮어 쓰려고했습니다.

.table-hover tbody tr:hover > th {
  background-color: #D1D119;
}

불행히도 위의 내용은 작동하지 않습니다.

이것을 시도하십시오 :

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #color;
}

이것은 나를 위해 일했습니다.

.table tbody tr:hover td, .table tbody tr:hover th {
    background-color: #eeeeea;
}

이것은 imo를 수행하는 가장 간단한 방법이었고 나를 위해 일했습니다.

.table-hover tbody tr:hover td {
    background: aqua;
}

제목 색상을 행과 동일한 호버 색상으로 변경하려는 이유는 확실하지 않지만 그렇게한다면 위의 솔루션을 사용할 수 있습니다. 당신이 t를 원한다면

이것은 grunt 또는 다른 작업 실행기를 통해 컴파일 된 부트 스트랩 v4 용입니다.

$table-hover-bg마우스 오버시 강조 표시를 설정하려면 변경해야합니다.

$table-cell-padding:            .75rem !default;
$table-sm-cell-padding:         .3rem !default;

$table-bg:                      transparent !default;
$table-accent-bg:               rgba(0,0,0,.05) !default;
$table-hover-bg:                rgba(0,0,0,.075) !default;
$table-active-bg:               $table-hover-bg !default;

$table-border-width:            $border-width !default;
$table-border-color:            $gray-lighter !default;

HTML 코드 :

<table class="table table-hover">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>

CSS 코드

.table-hover thead tr:hover th, .table-hover tbody tr:hover td {
    background-color: #D1D119;
}

CSS 코드는 다음을 나타냅니다.

행 위로 마우스 :

.table-hover> thead> tr : hover

th의 배경색이 # D1D119로 변경됩니다.

일

tbody에 대해서도 동일한 조치가 발생합니다.

.table-hover tbody tr : hover td

시험:

.table-hover > tbody > tr.active:hover > th {
                background-color: #color;
            }

나를 위해 @ pvskisteak5 대답은 "깜박임 효과"를 일으켰습니다. 이 문제를 해결하려면 다음을 추가하십시오.

            .table-hover tbody tr:hover,
            .table-hover tbody tr:hover td,
            .table-hover tbody tr:hover th{
                background:#22313F !important;
                color:#fff !important;
            }

.table-hover tbody tr:hover td {
    background: aqua;
}

이것은 내가 지금까지 할 수있는 최고의 솔루션입니다. 그런 scena에서 완벽하게 작동합니다.

기본 테이블 호버 클래스를 변경하는 대신 새 클래스 (anotherhover)를 만들고이 효과가 필요한 테이블에 적용하십시오.

아래와 같이 코드;

.anotherhover tbody tr:hover td { background: CornflowerBlue; }

예를 들어, Bootstrap의 .table-hover클래스를 사용하여 hoverable rows 를 구현 하십시오.

<table class="table table-hover">
  ...
</table>