Как добавить атрибут к каждой строке таблицы только при зависании (а не наведенной строки) через jQuery?

Question

Каков наилучший способ добавить атрибут (например, -webkit-filter: blur (2px), например) к каждой строке только тогда, когда пользователь наводится на строку и не задает ее на зависающей строке? Таким образом, в основном каждая строка будет размыта, кроме той, на которую наводится пользователь, и эффект исчезнет, ​​как только мышь пользователя не будет вибрировать ни на одной строке (все строки станут легко читаемыми без какого-либо эффекта).

Answer 1

jsFiddle Demo

Установите все стираться на имя класса или правила на основе выбора, если установка имен классов не столь актуальна (например, как #myTable tbody tr), удалить имя класса при наведении курсора мыши. Чтобы таблица отображала только размытие при фокусировке, используйте определение :hover в определении css.

$(function(){ 
 
    $("#myTable tr").addClass("unfocused"); 
 
    $('.unfocused').hover(function(){ 
 
    $(this).removeClass('unfocused'); 
 
    },function(){ 
 
    $(this).addClass('unfocused'); 
 
    }); 
 
});

#myTable:hover .unfocused{ 
 
filter: blur(2px); 
 
-webkit-filter: blur(2px); 
 
-moz-filter: blur(2px); 
 
-o-filter: blur(2px); 
 
-ms-filter: blur(2px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="myTable"> 
 
    <tr> 
 
     <td>Hello</td><td>World</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Hello</td><td>World</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Hello</td><td>World</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Hello</td><td>World</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Hello</td><td>World</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Hello</td><td>World</td> 
 
    </tr> 
 
</table>

Answer 2

Самый простой способ, которым я могу думать, это http://jsfiddle.net/n3a1d4z8/

$('.tg tr').hover(function(){  
    $('.tg tr').toggleClass('blur'); 
    $(this).toggleClass('blur'); 
}); 

Фильтр свойство CSS работает только в Chrome 31+, Safari 7+, Opera 18+. Нет Firefox или Explorer. Поэтому проверьте пример в одном из поддерживаемых браузеров, чтобы увидеть эффект размытия :)