jquery - 使用 jQuery 悬停时显示，点击时隐藏

Question

我一直在尝试 jQuery 的一些基本操作，但我是一个初学者。 如何实现这一目标？

这是迄今为止我的代码:

jQuery(document).ready(function () {

    // show/hide
    jQuery('#div').hide(); //hide at the beginning

    jQuery('#hover').hover(function () {
        jQuery("#div").show(400);
        jQuery('#hover').text('-');
        jQuery('#hover').addClass('click');
        jQuery('.click').height('auto');
        jQuery('.click').width('auto');
        jQuery('.click').css("font-size", "1em");
    }), jQuery("#div").hover(function () {
        //nothing on hover over
    }, function () {
        //hide on hover out
    });
});

我的 HTML 标记如下:

<a id="hover" href="javascript:;">Hide</a>
<div id="div">test</div>

我感觉我的做法不对。 你能帮我吗？

Answer 1

您的语法似乎有点不对劲，因为您声明了两个 hover 函数，甚至没有点击处理程序？

试试这个:

$('#hover')
    .mouseenter(function() {
        $('#div').show();
    })
    .click(function(e) {
        e.preventDefault();
        $('#div').hide();
    }); 

Example fiddle