jQuery 是否 :hover 适用于 td 元素？答案

【问题标题】：jQuery does :hover work for td elements?jQuery 是否 :hover 适用于 td 元素？
【发布时间】：2014-01-04 02:10:36
【问题描述】：

我有一个 HTML 表格，其中一个 td 元素中有一个隐藏的信息框。

<style type="text/css">
    .infobox{
        display: none;
        background-color: #FFDB8F;
        font-size: 11px;
    }
    td {
        border: 1px solid;
        width: 90px;
        height: 84px;
    }
</style>
<table>
    <tr>
        <td>foobar</td>
        <td>foobar</td>
        <td class="hover">hover me</td>
        <td class="hover">hover me</td>
        <td colspan="2"><div class="infobox">The terms foobar, fubar, or foo, bar, baz and qux (alternatively, quux) are sometimes used as placeholder names (also referred to as metasyntactic variables) in computer programming or computer-related documentation.</div></td>
    </tr>
    <tr>
        <td>foobar</td>
        <td>foobar</td>
        <td class="hover">hover me</td>
        <td class="hover">hover me</td>
        <td>foobar</td>
        <td>foobar</td>
    </tr>
</table>

我想在用户将鼠标悬停在某些 td 元素上时显示此信息框。所以尝试了这个：

$('.hover').hover(function() {
    $('.infobox').show();
},
        function() {
            $('.infobox').hide();
        }
});

还有这个：

setInterval(function() {
    var $sample = $(".hover");
    $sample.each(function(index) {
        if ($(this).is(":hover")) {
            $('.infobox').show();
        }
        else {
            $('.infobox').hide();
        }
    });
}, 200);

两者都不适用于 td 元素。我错过了什么？还是.hover() 根本不适用于 td 元素？

【问题讨论】：

你不能在 jQuery 中访问伪类:hover。你必须切换一个像isHovered这样的类。
在问这个问题之前你看浏览器的控制台吗？
是的，可以有 td 悬停 - jsfiddle.net/zxBLw
额外的括号是复制和粘贴错误。好像是firefox的问题。

标签： javascript jquery hover html-table

【解决方案1】：

问题似乎是一个错字，您的代码中有一个额外的}。

$('.hover').hover(
    function() {$('.infobox').show();},
    function() {$('.infobox').hide();}
    } // <-- remove this
);

除此之外，它似乎工作正常。

DEMO

【讨论】：

好吧，好像是firefox的问题。我用我的代码制作了一个自己的 JSFiddle，它按预期工作。如果我在浏览器中运行 html 文件，它就不起作用。额外的 } 是复制和粘贴错误。

【解决方案2】：

悬停功能中的额外}。请在提问前查看您的控制台。

$('.hover').hover(
            function() {$('.infobox').show();},
            function() {$('.infobox').hide();}
        );

见小提琴here

【讨论】：