Перейти к содержимому


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

  • Фотография WGN
    #2

    WGN (worldgamenews.com)
    Очков активности: 64.5 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #3

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография profi
    #10

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 17.08.2018
Топ 5 участников по репутации


Зебра В Таблице

#1 Banderas

Banderas
  • Пользователь
  • 1168 сообщений
  • Репутация: 1
0

Отправлено 11 December 2011 - 09:39

Создал зебру, теперь хочу что бы при наведение менялся 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 что то перекрывает.

 

 

  • 0

I'm web-developer 

Magento one love!



robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Пустые боковые поля и дизайна
  2. Таблица в самом верху
  3. Зазор между картинками при табличной верстке
  4. Html верстка на конкретном примере
  5. Неправильное отображение таблицы на сайте

#2 matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 11 December 2011 - 11:27

Можно так:
<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>

  • 0


#3 Banderas

Banderas
    Topic Starter
  • Пользователь
  • 1168 сообщений
  • Репутация: 1

Отправлено 11 December 2011 - 12:21

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

I'm web-developer 

Magento one love!



#4 Евгений

Евгений
  • Неактивные
  • 481 сообщений
  • Репутация: 0

Отправлено 11 December 2011 - 13:04

tr:hover {background:#цвет}
такое не работает с jquery?
  • 0

#5 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 11 December 2011 - 20:01

Такое работает независимо от того, используется jquery или нет .
Но не работает в IE6, который понимает псевдокласс hover только для ссылок. :)


  • 0

#6 matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 11 December 2011 - 22:46

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

Я так понимаю из-за системы приоритетности CSS. То бишь, указав правило для нечетных строк таким образом:
$('#celebs tbody tr:even').css('background', '#ffc0cb');
Это все равно, что указать стиль элементу непосредственно в разметке:
<tr style="background:#ffc0cb">

Данное правило имеет гораздо больший приоритет, чем правило класса, соответственно, остается цвет правила с бОльшим приоритетом.
Для примера, можно смоделировать такую безумную ситуацию ;)
#child{color: green;}
		.child{color:blue;}
		#parent p{color:red;}
		#parent p.child{color:yellow;}
		#parent p#child{color:gray;}
<div id="parent">
<p id="child" class="child" style="color:#9200D7">Text</p>
</div>

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



Оформление форума – IPBSkins.ru