CSS для Hover применяется только к нечетным строкам с помощью jQuery - PullRequest
Новая
       0

CSS для Hover применяется только к нечетным строкам с помощью jQuery

2 голосов
/ 15 июня 2011

У меня есть этот бит кода, который отлично работает для чередования реальных строк, но только зависает на «нечетных» строках.

Я использую следующий код: 

    <script type="text/javascript"> 
$(document).ready(function(){
    //jQuery ready is quicker than onload
$(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
$(".stripeMe tr:even").addClass("alt");
});

Это CSS, который я использую 

    #table tr.over td{background: #bcd4ec;}
    #table tr.alt td {background: #ecf6fc;}

Есть идеи?

Ответы [ 4 ]

2 голосов
/ 15 июня 2011

Ваш стиль переопределяется вашим стилем. Вы должны переключить линии. 

#table tr.alt td {background: #ecf6fc;}
#table tr.over td{background: #bcd4ec;}

Теперь .alt имеет более низкий приоритет, чем .over, поскольку он определен ранее.

0 голосов
/ 15 июня 2011

здесь у вас есть пример wotking, проблема была в иерархии css, теперь работает, потому что over class y down.В этом случае класс over заменит класс alt. 

<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5b1.js"></script>
</head>
<body>
  <style>
    #table tr.alt { background: #ecf6fc;}
    #table tr.over { background: red;}
  </style>
<table id="table" class="stripeMe">
  <tr>
    <td>aaaa</td>
  </tr>
  <tr>
    <td >bbbb</td>
  </tr>
</table>
 <script type="text/javascript"> 
 $(document).ready(function(){
    //jQuery ready is quicker than onload
   $(".stripeMe tr").mouseover(function()          {$(this).removeClass("over");$(this).addClass("over");}).mouseout(function()  {$(this).removeClass("over");});
  $(".stripeMe tr:even").addClass("alt");
 });
</script>
</body>
</html>
0 голосов
/ 15 июня 2011

Вам не нужен jQuery / Javascript для управления этим.Как упоминает yoavmatchulsky, измените свой CSS, но вместо класса over используйте: hover 

#table tr td { /* regular */ }
#table tr.alt td { /* regular */ }

#table tr:hover td { background: #bcd4ec; }
#table tr.alt:hover td { background: #ecf6fc; }

EDIT: Поскольку требуется использовать jQuery, это может не сработать для ответа на OP,Это было бы быстрее, чем при использовании jQuery IMO.jQuery должен будет найти и обновить поведение нескольких элементов на странице (например, строк таблицы), чтобы применить поведение.

0 голосов
/ 15 июня 2011

изменить CSS: 

#table tr td { /* regular not hovered */ }
#table tr.alt td { /* alternative, not hovered */ }

#table tr.over td {background: #bcd4ec;}
#table tr.alt.over td {background: #ecf6fc;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...