Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   в IE9 не работает, а в ранних работает (https://javascript.ru/forum/jquery/37596-v-ie9-ne-rabotaet-v-rannikh-rabotaet.html)

зверек 26.04.2013 11:39

в IE9 не работает, а в ранних работает
 
имеется таблица, в которой цвет строк чередуется
<tr class="color1" ....>
<tr class="color2" ....>

нужно чтобы при наведении мышью строка меняла свой цвет на color3, который задан при помощи #listhover{color:color3;}

$('#listTable tr').hover(		
		function () {			
				$(this).attr("id","listhover");		
      }, 
		function () {
				$(this).removeAttr("id"); 
      }
	);


все распрекрасно работает во всех браузерах, кроме IE9, в котором строка после ухода с нее мыши попросту обесцвечивается (становится белой). То есть ощущение, что вторая функция в hover не только удаляет атрибут, задающий color3, но заодно и класс, определяющий изначальный цвет строки (color1 или color2).

Как с этим бороться?

tsigel 26.04.2013 11:44

а почему не использовать вместо id = listhover class = active?
Тогда:
$('#listTable tr').hover(hoverTd, hoverTd);
function hoverTd() {
  $(this).toggleClass("active");
};

зверек 26.04.2013 11:53

почему-то этот вариант не работает.
firebug показывает при наведении <tr class="color1 listhover" , но цвет заданный в listhover не перекрывает цвет, заданный в color1

tsigel 26.04.2013 11:57

Тогда задавайте цвет для каждой конкретной ячейки таблицы, а не для всей строки:
$('#listTable tr').hover(hoverTd, hoverTd);
function hoverTd() {
  $(this).find('td').each(function () {
    $(this).toggleClass("active");
  });
};

tsigel 26.04.2013 11:59

Чтобы прописанный вами стиль цвета перекрывал ВСЕ стили (даже прописанные в style элемента) можете дописать !important, например:
color: red !important;

В css будет отробатываться тот стиль, который задан точнее. Например если у вас
.someClass .color1 {
/*стиль*/ }
#someId .someClass .active {
/*стиль*/ 
}

В данном случае отработает стиль active.

зверек 26.04.2013 12:02

тоже не работает. Этот вариант не добавляет цвет в ячейки.

зверек 26.04.2013 12:07

ура! ваш вариант
$('#listTable tr').hover(hoverTd, hoverTd);
function hoverTd() {
  $(this).toggleClass("active");
};

заработал, когда задал important для класса active

Спасибо большое!

tsigel 26.04.2013 12:07

Что-то вы не так делаете, выложите больше кода и желательно тестовый пример.

Цитата:

Сообщение от зверек
Этот вариант не добавляет цвет в ячейки.

Этот вариант добавляет класс в ячейки. Все зависит от того как вы прописываете стиль для этого класса.

зверек 26.04.2013 12:09

все заработало, спасибо. Просто пока я отвечал на одно сообщение, вы написали другое. Путаница вышла :)

tsigel 26.04.2013 12:14

Старайтесь по возможности избегать !important, это костыль, к тому-же не очень хороший. Им можно пользоваться только для таких временных классов, которые есть только при наведении и т.п., иначе замучаетесь вносить изменения в стилях и не сможете перекрывать их стилями из скрипта.


Часовой пояс GMT +3, время: 07:53.