Tr: зависание не работает

Я пытаюсь выделить (изменить цвет фона) всей строки, когда мышь зависает в строке таблицы. Я искал в Сети, и он должен работать, но это не так. Я показываю его в Chrome.

<table class="list1">
<tr>
   <td>1</td><td>a</td>
</tr>
<tr>
   <td>2</td><td>b</td>
</tr>
<tr>
   <td>3</td><td>c</td>
</tr>
</table>

my css:

.list1 tr:hover{
background-color:#fefefe;
}

Правильный css должен быть:

.list1 tr:hover td{
background-color:#fefefe;
}

//--this css for the td keeps overriding the one i showed earlier
.list1 td{
background-color:#ccc000;
}

Спасибо за отзывы, ребята!

Ответы

Ответ 1

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

table.YourClass tr:hover td {
background-color: #FEFEFE;
}

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

Ответ 2

Вам нужно использовать <!DOCTYPE html> для: hover для работы с чем-либо, кроме тега <a>. Попытайтесь добавить это в начало своего HTML.

Ответ 3

попробовать

.list1 tr:hover td{
    background-color:#fefefe;
}

Ответ 4

tr:hover не работает в старых браузерах.

Вы можете использовать jQuery для этого:

.tr-hover
{  
  background-color:#fefefe;
}

$('.list1 tr').hover(function()
{
    $(this).addClass('tr-hover');
},function()
{
    $(this).removeClass('tr-hover');
});

Ответ 5

У меня отлично работает... tr:hover должно работать. Возможно, это не сработает, потому что:

  1. Заданный вами цвет фона очень светлый. Вы случайно не используете это на белом фоне, не так ли?

  2. Ваши теги <td> закрыты неправильно.

Обратите внимание, что наведение <tr> не будет работать в старых браузерах.

Ответ 6

Вы можете просто использовать свойство background CSS следующим образом:

tr:hover{
    background: #F1F1F2;    
}

Рабочий пример

Ответ 7

Попробуйте:

код css:

.list1 tr:hover td {
    background-color:#fefefe;
}

Ответ 8

Используйте !important:

.list1 tr:hover{
    background:#fefefe !important;
}

Ответ 9

Как говорит @wesley, вы не закрыли свой первый <td>. Вы открыли его два раза.

<table class="list1">
<tr>
   <td>1</td><td>a</td>
</tr>
<tr>
   <td>2</td><td>b</td>
</tr>
<tr>
   <td>3</td><td>c</td>
</tr>
</table>

CSS:

.list1 tr:hover{
    background-color:#fefefe;
}

JavaScript не нужен, просто заполните HTML-код

Ответ 10

У меня была та же проблема. Я обнаружил, что если я использую DOCTYPE, например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

это не сработало. Но если я использую:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

он действительно работал.

Ответ 11

Также попробуйте tr:hover td {color: aqua;} `

Ответ 12

Недавно у меня была похожая проблема, проблема была в том, что я использовал background-color, используйте background: {anyColor}

Пример:

tr::hover td {background: red;}

Это работает как шарм!

Ответ 13

Также важно, в каком порядке стили в тэгах вашего CSS файла. Убедитесь, что ваши tr: nth-child и tr: hover td описаны перед таблицами td и th. Вот так:

#tblServers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#tblServers tr:nth-child(even){background-color: #f2f2f2;}

#tblServers tr:hover td{background-color: #c1c4c8;}

#tblServers td, #tblServers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tblServers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4a536e;
  color: white;
}