如何通过jQuery仅在悬停一行(而不是悬停的行）时向每个表行添加属性

How to add attribute to every table row only when one is hovered (and not the hovered row) via jQuery?

本文关键字：悬停 属性 添加 一行 jQuery 何通过      更新时间：2023-09-26

添加属性的最佳方式是什么（比如-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>

我能想到的最简单的方法是http://jsfiddle.net/n3a1d4z8/

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

CSS过滤器属性仅适用于Chrome 31+、Safari 7+和Opera 18+。没有Firefox或Explorer。因此，在一个受支持的浏览器中查看示例以查看模糊效果：）

相关文章：