javascript - 如何仅当通过 jQuery 悬停一个表行(而不是悬停的行)时才向每个表行添加属性？

Question

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

Answer 1

jsFiddle Demo

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

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