jQuery - toggleClass () выделяет <tr>границ в Chrome, но не в Firefox - PullRequest
Новая
       30

jQuery - toggleClass () выделяет <tr>границ в Chrome, но не в Firefox

0 голосов
/ 23 ноября 2011

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

Вот мой JQuery: 

$(document).on('hover', '.song', function()
{
    $(this).toggleClass('highlightRow');
});

Вот мой HTML: 

<table border="1" style="padding-top:0px; margin-top:0px;">
    <tr class="song"><td>test1</td></tr>
    <tr class="song"><td>test2</td></tr>
    <tr class="song"><td>test2</td></tr>
</table>

Вот класс CSS: 

.highlightRow
{
   cursor: pointer;
   border: 2px solid red;
}

Этоотлично работает в Chrome.В Firefox курсор меняется на указатель, поэтому он переключает класс, но границы никогда не меняют цвета.Я создал jsFiddle (http://jsfiddle.net/5a9k2/7/) для него, и он отлично работает. Может кто-нибудь сказать мне, почему это не работает в Firefox?

РЕДАКТИРОВАТЬ: ОТВЕТ Благодаря ответу нижеЯ понял, что TR не может иметь границ. При этом мне нужно, чтобы он работал с динамическими элементами, и хотел выделить все в ряду, а не только тот, который завис над ним, поэтому мой последний JS, который работал: 

$(document).on('hover', 'tr.song', function()
{
    $(this).children().toggleClass('highlightRow');
});

Ответы [ 2 ]

2 голосов
/ 23 ноября 2011

Границы не могут быть применены к "tr", вместо этого попробуйте "td".

РЕДАКТИРОВАТЬ

Замените код jQuery на: 

$("tr.song td").hover(function(){
    $(this).addClass("highlightRow");
},function(){
    $(this).removeClass("highlightRow");        
});
0 голосов
/ 23 ноября 2011

Граница css должна быть: border: 2px, сплошной красный;

From: http://www.w3schools.com/css/css_border.asp При использовании свойства border порядок значений: 

border-width
border-style
border-color

Не имеет значения, пропущено ли одно из приведенных выше значений (хотя требуется стиль рамки), если остальные находятся в указанном порядке.

...