CSS hover не работает в ячейке таблицы, если для нее указан цвет фона c - PullRequest
Новая
       23

CSS hover не работает в ячейке таблицы, если для нее указан цвет фона c

0 голосов
/ 07 мая 2020

Я уже установил эффект :hover для строк таблицы, используя CSS. Единственная проблема заключается в том, что эффект наведения не работает, если ячейка таблицы имеет заданный цвет фона c, например зеленый. В примере кода это означает, что 3-й столбец не меняет цвет фона с зеленого (соответственно красного) на #96c7ef, как только вы наводите на него указатель мыши. (Это нормально, первая строка также не меняет цвет фона. Это намеренно пропущено с использованием <thead>.) В других ячейках, у которых нет цвета фона, наведение работает.

page. html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <link rel="stylesheet" href="./basic.css" type="text/css">
</head>

<body>
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
    <thead>
        <tr>
            <th style="width: 10%">ID</th>
            <th style="width: 10%">Name</th>
            <th style="width: 10%">Status</th>
        </tr>
    </thead>

    <tr>
        <td class="td1" style="color:grey"><i>1</i></td>
        <td class="td1" style="color:grey"><i>First</i></td>
        <td class="tdX" align="center"><b>Disabled</b></td>
    </tr>

    <tr>
        <td class="td2" style="color:grey"><i>2</i></td>
        <td class="td2" style="color:grey"><i>Second</i></td>
        <td class="tdY" align="center"><b>Active</b></td>
    </tr>
</table>
</body>
</html>

basi c. css

.multidata td,.multidata th {
    border: 2px solid #808080;
    padding: 5px 5px;
}

.multidata tbody>tr:hover {
    background-color:#96c7ef!important;
}

.tdX {
    background-color:red;
    font-weight:bold;
}

.tdY {
    background-color:green;
    font-weight:bold;
}

Эффект наведения также имеет такое же поведение, если объявление стиля двух ячеек ( tdX, tdY) указывается как встроенный стиль. Я указал! Important, но ничего не меняется.

Что не так с моим кодом?

Ответы [ 5 ]

1 голос
/ 07 мая 2020

Лучше стилизовать TD зависшего TR, используя

.multidata tbody> tr: hover td {background-color: # 96c7ef}

1 голос
/ 07 мая 2020

Если вы имеете в виду, что цвет фона строк при наведении курсора должен также применяться к тем ячейкам, которые do уже имеют цвет фона (т.е. переопределить это), вы можете расширить селектор для правила наведения также применяется к ячейкам: 

.multidata tbody>tr:hover,
.multidata tbody>tr:hover td {
  background-color: #96c7ef!important;
}

На самом деле даже достаточно просто использовать вторую строку (то есть ту, которая включает ячейки) в селекторе, поскольку это будет применяться к всем ячейки этой строки: 

.multidata tbody>tr:hover td {
  background-color: #96c7ef!important;
}

Здесь в вашем полном коде: 

.multidata td,
.multidata th {
  border: 2px solid #808080;
  padding: 5px 5px;
}

.multidata tbody>tr:hover td {
  background-color: #96c7ef!important;
}

.tdX {
  background-color: red;
  font-weight: bold;
}

.tdY {
  background-color: green;
  font-weight: bold;
}
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
  <thead>
    <tr>
      <th style="width: 10%">ID</th>
      <th style="width: 10%">Name</th>
      <th style="width: 10%">Status</th>
    </tr>
  </thead>

  <tr>
    <td class="td1" style="color:grey"><i>1</i></td>
    <td class="td1" style="color:grey"><i>First</i></td>
    <td class="tdX" align="center"><b>Disabled</b></td>
  </tr>

  <tr>
    <td class="td2" style="color:grey"><i>2</i></td>
    <td class="td2" style="color:grey"><i>Second</i></td>
    <td class="tdY" align="center"><b>Active</b></td>
  </tr>
</table>
1 голос
/ 07 мая 2020

Если вы скажете просто tr hover, вы можете просто изменить фон tr, но td имеет фон и поверх tr. Так что вы должны сказать hovered tr's td. Так что просто добавьте 

.multidata  tbody>tr:hover td {
    background-color:#96c7ef!important;
}


.multidata td,.multidata th {
    border: 2px solid #808080;
    padding: 5px 5px;
}

.multidata  tbody>tr:hover td {
    background-color:#96c7ef!important;
}
.tdX {
    background-color:red;
    font-weight:bold;
}

.tdY {
    background-color:green;
    font-weight:bold;
}
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
    <thead>
        <tr>
            <th style="width: 10%">ID</th>
            <th style="width: 10%">Name</th>
            <th style="width: 10%">Status</th>
        </tr>
    </thead>

    <tr>
        <td class="td1" style="color:grey"><i>1</i></td>
        <td class="td1" style="color:grey"><i>First</i></td>
        <td class="tdX" align="center"><b>Disabled</b></td>
    </tr>

    <tr>
        <td class="td2" style="color:grey"><i>2</i></td>
        <td class="td2" style="color:grey"><i>Second</i></td>
        <td class="tdY" align="center"><b>Active</b></td>
    </tr>
</table>
0 голосов
/ 07 мая 2020 

.multidata td,.multidata th {
    border: 2px solid #808080;
    padding: 5px 5px;
}

.multidata tr:hover td {
    background-color:#96c7ef;
}

.tdX {
    background-color:red;
    font-weight:bold;
}

.tdY {
    background-color:green;
    font-weight:bold;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <link rel="stylesheet" href="./basic.css" type="text/css">
</head>

<body>
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
    <thead>
        <tr class="change_on_hover">
            <th style="width: 10%">ID</th>
            <th style="width: 10%">Name</th>
            <th style="width: 10%">Status</th>
        </tr>
    </thead>

    <tr class="change_on_hover">
        <td class="td1" style="color:grey"><i>1</i></td>
        <td class="td1" style="color:grey"><i>First</i></td>
        <td class="tdX" align="center"><b>Disabled</b></td>
    </tr>

    <tr class="change_on_hover">
        <td class="td2" style="color:grey"><i>2</i></td>
        <td class="td2" style="color:grey"><i>Second</i></td>
        <td class="tdY" align="center"><b>Active</b></td>
    </tr>
</table>
</body>
</html>
0 голосов
/ 07 мая 2020

вы забыли поместить <tr> внутрь <tbody>

что-то вроде этого 

<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
    <thead>
        <tr>
            <th style="width: 10%">ID</th>
            <th style="width: 10%">Name</th>
            <th style="width: 10%">Status</th>
        </tr>
    </thead>

    <tbody>
    <tr>
        <td class="td1" style="color:grey"><i>1</i></td>
        <td class="td1" style="color:grey"><i>First</i></td>
        <td class="tdX" align="center"><b>Disabled</b></td>
    </tr>

    <tr>
        <td class="td2" style="color:grey"><i>2</i></td>
        <td class="td2" style="color:grey"><i>Second</i></td>
        <td class="tdY" align="center"><b>Active</b></td>
    </tr>
    </tbody>
</table>
...