Question

我有一个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元素？

Answer 1

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

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

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

DEMO

Answer 2

你的悬停功能中的

额外}。在询问问题之前，请先查看您的控制台。

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

请参阅小提琴here

jQuery做：悬停td元素的工作？

2 个答案: