powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS+JavaScript: подмена класса у <tr>
14 сообщений из 14, страница 1 из 1
CSS+JavaScript: подмена класса у <tr>
    #35561240
crystal_v
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Надо сделать элементарную подсветку строк в таблице при наведении мышки

использую JQuery.

Делаю следующее:

1. Рисуется таблица с
Код: plaintext
<tbody id="tbdy">....</tbody>
2. к tbody применяется стиль
Код: plaintext
#tbdy tr {background-color: #EAEAEA;}
3. пишу javascript:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
$('#tbdy tr').hover(
			function(){
				$(this).addClass('thover');
			}, 
			function(){
				$(this).removeClass('thover');
			}
		);

4. класс
Код: plaintext
.thover{background-color: #FFFFFF;}

Подсветка не работает!

Внимание вопрос: почему?
Смотрю Firebug'ом при наведении на <tr> класс появляется, но подсветка не работает.
...
Рейтинг: 0 / 0
CSS+JavaScript: подмена класса у <tr>
    #35561298
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Вот такое работает точно

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<table class='data'>
<thead class='data'>
<tr class='data'>
   <th class='data'>Название</th>
</tr>
</thead>
<tbody class='data'>
<tr class='data' onclick='Fnc1()' onmouseout='this.className="data"' onmouseover='this.className="data_sel"'>
   <td class='data'>Пункт  1 </td>
</tr>
<tr class='data' onclick='Fnc2()' onmouseout='this.className="data"' onmouseover='this.className="data_sel"'>
   <td class='data'>Пункт  2 </td>
</tr>
</tbody>
</table>
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
CSS+JavaScript: подмена класса у <tr>
    #35561404
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
$('#tbdy tr').bind("mouseenter",
			  function(){
				$(this).addClass('thover');
			  }) 
			.bind("mouseleave",
                          function(){
				$(this).removeClass('thover');
			  });
на сайте у них есть пример с описанием в чем разница между этими событиями
...
Рейтинг: 0 / 0
CSS+JavaScript: подмена класса у <tr>
    #35561418
Краказябл
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
дело вот в чём:
у Вас tr уже имеет класc с указанным background-color . В этом случае другой клас с background-color не подействует. Можете сделать не классом, а стилем:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
$('#tbdy tr').hover(
	function(){
		$(this).css('background-color', '#000');
	}, 
	function(){
		$(this).css('background-color', '');
	}
);
и ещё момент: это конструкция у Вас находится в $(document).ready() ?
...
Рейтинг: 0 / 0
CSS+JavaScript: подмена класса у <tr>
    #35561540
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
да, кстати, насчет приоритетов Краказябл прав, приоритет имеет более конкретный селектор (в данном случае напрямую к tr)
поможет простой трюк

Код: plaintext
.thover{background-color: #FFFFFF!important;}
...
Рейтинг: 0 / 0
CSS+JavaScript: подмена класса у <tr>
    #35561590
Краказябл
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
конечно, с !emportant было бы проще. НО у него есть свои минусы, IE6 его вообще не понимает, да и в некоторых браузерах может возникнуть конфликт с таблицей стилей.

Настоятельно рекомендую Вам сделать так, как написал я, т.е. задать стиль напрямую
...
Рейтинг: 0 / 0
CSS+JavaScript: подмена класса у <tr>
    #35561598
Краказябл
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
опечатка вышла: !important
...
Рейтинг: 0 / 0
CSS+JavaScript: подмена класса у <tr>
    #35561601
crystal_v
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Краказябл так делать по меньшей мере некрасиво. Потому что при смене дизайна ищи потом все места где цвет меняется. А вот bind() и !important сейчас попробую.
...
Рейтинг: 0 / 0
CSS+JavaScript: подмена класса у <tr>
    #35561649
crystal_v
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
bind не сработал.
!important из-за несовместимостей браузеров тоже не подходит.
Неужели кроме указания свойства напрямую нет вариантов?
не верю. Надо искать.
...
Рейтинг: 0 / 0
CSS+JavaScript: подмена класса у <tr>
    #35561650
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Краказяблконечно, с !emportant было бы проще. НО у него есть свои минусы, IE6 его вообще не понимает, да и в некоторых браузерах может возникнуть конфликт с таблицей стилей.

все понимает, если написать его ниже предыдущего правила
...
Рейтинг: 0 / 0
CSS+JavaScript: подмена класса у <tr>
    #35561654
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ещё для верности можно уточнить селектор:)
tr.thover {}
...
Рейтинг: 0 / 0
CSS+JavaScript: подмена класса у <tr>
    #35561682
crystal_v
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
зы . tr.thover{} сработал как надо! Пока остановлюсь на этом варианте.
!important тоже работал и в IE6 и в других.
...
Рейтинг: 0 / 0
CSS+JavaScript: подмена класса у <tr>
    #35562206
Краказябл
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
странно, проверил и перепроверил на ИЕ6 - не видит.
...
Рейтинг: 0 / 0
CSS+JavaScript: подмена класса у <tr>
    #35562223
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
запости свой код
...
Рейтинг: 0 / 0
14 сообщений из 14, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS+JavaScript: подмена класса у <tr>
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]