仅当通过 jQuery 悬停（而不是悬停的行）时，如何向每个表行添加属性？

Posted 2023-05-08

【中文标题】仅当通过 jQuery 悬停（而不是悬停的行）时，如何向每个表行添加属性？

【英文标题】：How to add attribute to every table row only when one is hovered (and not the hovered row) via jQuery?

【发布时间】：2014-12-08 12:47:45

【问题描述】：

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

【参考方案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>

【讨论】：

添加table:hover .unfocused 而不是.unfocused 这样模糊只会在悬停在桌子上时应用。

@Zenorbi - 我错过了仅在表格悬停时才适用的部分。您的 css 建议比我实际进行的 js 编辑更可行，我将对其进行更改:)

这正是我想要的。说到 jQuery，我很烂，但是阅读您的代码实际上很有意义。谢谢大佬。

【参考方案2】：

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

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

CSS 过滤器属性仅适用于 Chrome 31+、Safari 7+、Opera 18+。没有 Firefox 或资源管理器。因此，请在支持的浏览器之一中查看示例以查看模糊效果:)