Question

只有当用户在一行上悬停并且没有将其设置在正在悬停的行上时，将属性（例如-webkit-filter：blur（2px）;）添加到每一行的最佳方法是什么？所以基本上除了用户悬停的那一行之外，每一行都会模糊不清，一旦用户的鼠标没有悬停在任何行上，效果就会消失（所有的行都会再次变得可读而没有任何影响）。

Answer 1

<强> jsFiddle Demo

如果设置类名不相关（例如#myTable tbody tr），则根据选择将所有内容设置为模糊类别或规则，并在悬停时删除类名称。为了使表格仅在聚焦时显示模糊，请在css定义中使用:hover。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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或资源管理器。因此，请检查其中一个支持的浏览器中的示例以查看模糊效果：）

如果通过jQuery悬停（而不是悬停的行），如何将属性添加到每个表行？

2 个答案: