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

仅当用户将鼠标悬停在一行上并且未在被悬停的行上设置属性时，将属性(例如-webkit-filter:blur(2px)；例如)添加到每一行的最佳方法是什么？因此，基本上，每行都将是模糊的，除非用户将鼠标悬停在其中，并且一旦用户的鼠标不在任何行上悬停，效果就会消失(所有行将再次变得可读，而不会产生任何影响)。

最佳答案

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>

关于javascript - 仅当通过jQuery悬停一个表行(而不是悬停的行)时，如何才将属性添加到每个表行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26348717/