Зебра В Таблице - SEO форум MaulTalk.com

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

Зебра В Таблице, думаю будет всем полезно

Опции

Banderas

Topic Starter сообщение

11.12.2011, 10:39; Ответить: Banderas

Сообщение #1

Старожил

Группа: User
Сообщений: 1376
Регистрация: 29.8.2008
Поблагодарили: 10 раз
Репутация:

Создал зебру, теперь хочу что бы при наведение менялся background.
Мой стиль замены бекграунда:

tr.zhover {
background: #e5f3f9;
}

Сам код:

$(function() {
    $('body').css('background', 'white');
    $('#celebs tbody tr:even').css('background', '#e6e6fa');
    $('#celebs tbody tr:even').css('background', '#ffc0cb');

    $('#celebs tbody tr').hover(function() {
        $(this).toggleClass('zhover'); // при наведение присваиваю выбранной строке класс zhover
    });
});

В итоге меняют свой стиль только четные колонки (2, 4, 6, ...). В чем может быть проблема? Я подозреваю что просто мой стиль zhover что то перекрывает.

Ответить с цитированием данного сообщения

matroskin8 matroskin8 11.12.2011, 12:27; Сообщений: 767 Поблагодарили: 0 раз Репутация: 143 Просмотр профиля	11.12.2011, 12:27; Ответить: matroskin8 Сообщение #2
Завсегдатай Группа: User Сообщений: 767 Регистрация: 4.9.2009 Поблагодарили: 0 раз Репутация: 143	Можно так: <style type="text/css"> .evenColor{ background: #ffc0cb; } .zhover { background: #e5f3f9; } </style> <script type="text/javascript"> $(document).ready(function(){ $('body').css('background', 'white'); $('#celebs tbody tr:even').addClass('evenColor'); $('#celebs tbody tr').hover(function() { $(this).toggleClass('zhover'); // при наведение присваиваю выбранной строке класс zhover }); }); </script>

Banderas Topic Starter BanderasTopic Starter 11.12.2011, 13:21; Сообщений: 1376 Поблагодарили: 10 раз Репутация: 3 Просмотр профиля	Topic Starter 11.12.2011, 13:21; Ответить: Banderas Сообщение #3
Старожил Группа: User Сообщений: 1376 Регистрация: 29.8.2008 Поблагодарили: 10 раз Репутация: 3	а почему в моем случае не работает?

НЕПЛОХОЙ НЕПЛОХОЙ 11.12.2011, 14:04; Сообщений: 529 Поблагодарили: 4 раза Репутация: 1 Просмотр профиля	11.12.2011, 14:04; Ответить: НЕПЛОХОЙ Сообщение #4
Завсегдатай Группа: User Сообщений: 529 Регистрация: 2.11.2009 Поблагодарили: 4 раза Репутация: 1	tr:hover {background:#цвет} такое не работает с jquery?

yury_mw yury_mw 11.12.2011, 21:01; Сообщений: 648 Поблагодарили: 0 раз Репутация: 195 Просмотр профиля	11.12.2011, 21:01; Ответить: yury_mw Сообщение #5
Завсегдатай Группа: User Сообщений: 648 Регистрация: 13.5.2009 Поблагодарили: 0 раз Репутация: 195	Такое работает независимо от того, используется jquery или нет . Но не работает в IE6, который понимает псевдокласс hover только для ссылок. :) Поблагодарили: (0)

matroskin8

11.12.2011, 23:46; Ответить: matroskin8

Сообщение #6

Завсегдатай

Группа: User
Сообщений: 767
Регистрация: 4.9.2009
Поблагодарили: 0 раз
Репутация:

143

(Banderas @ 11.12.2011, 11:21)

а почему в моем случае не работает?

Я так понимаю из-за системы приоритетности CSS. То бишь, указав правило для нечетных строк таким образом:

$('#celebs tbody tr:even').css('background', '#ffc0cb');

Это все равно, что указать стиль элементу непосредственно в разметке:

Данное правило имеет гораздо больший приоритет, чем правило класса, соответственно, остается цвет правила с бОльшим приоритетом.
Для примера, можно смоделировать такую безумную ситуацию

#child{color: green;}
        .child{color:blue;}
        #parent p{color:red;}
        #parent p.child{color:yellow;}
        #parent p#child{color:gray;}

Все цвета прописаны для одного элемента, но будет применено правило с наибольшим приоритетом (указанное напрямую) - style="color:#9200D7"
Именно поэтому для правильной работы лучше задавать класс и его затем же менять на другой класс.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

Поблагодарили: (0)

« Предыдущая тема · Программная часть · Следующая тема »

2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Граббинг/Автопостинг Контента из всех социальных сетей. Зебра. Автоматический постинг в ваши сообщества	6	newguru	6501	17.3.2015, 14:40 автор: ЗЛОЙ
Помогите сделать подсчет в таблице из из базы данных на сайте	2	Сергей климанов	3303	13.7.2012, 23:40 автор: -Сергей климанов-
Увеличивается высота строк в таблице	2	Rugstad	6400	2.4.2011, 15:14 автор: -Rugstad-
Как поднять таблицу в таблице?	13	Павел Кушнарев	30174	29.3.2011, 16:52 автор: -born-
удаление строк в таблице	13	Anakonda	7541	29.1.2010, 16:59 автор: -HTMLandPHP-

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 19.4.2024, 10:30

Дизайн