使用jQuery悬停时显示，单击时隐藏

我一直在尝试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>

测验

我觉得我做这件事的方式不对。

---

您能帮助我吗？

您的语法似乎有点不正确，因为您声明了两个

hover

函数，甚至没有单击处理程序

试试这个：

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

---

您的语法似乎有点不正确，因为您声明了两个

hover

函数，甚至没有单击处理程序

试试这个：

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

---

我想我知道你要干什么了。我修改了您的dom并使用了类使其更加灵活，因为这看起来像是您可能有多个dom，如果没有，您可以切换回id

---

下面是另一个选项，使用鼠标单击可更改的文本（打开/关闭）：

---

我想我知道你要干什么了。我修改了您的dom并使用了类使其更加灵活，因为这看起来像是您可能有多个dom，如果没有，您可以切换回id

---

下面是另一个选项，使用鼠标单击可更改的文本（打开/关闭）：

---

单击元素需要将鼠标悬停在其上。你知道！是的，但我正在尝试替换原来的按钮，可能会隐藏它并显示一些最小化图标。即使使用2个按钮，如何执行此操作？在将其悬停并且隐藏了

#div

之后，您希望

#hover

执行什么操作？是否希望它在悬停时显示，不悬停时隐藏？单击某个元素需要悬停在其上。你知道！是的，但我正在尝试替换原来的按钮，可能会隐藏它并显示一些最小化图标。即使使用2个按钮，如何执行此操作？在将其悬停并且隐藏了

#div

之后，您希望

#hover

执行什么操作？是否希望它在悬停时显示，在不悬停时隐藏？

jQuery(document).ready(function () {
    jQuery(".div").hide(); //hide at the beginning

    function hideDiv(e) {
        e.preventDefault();
        jQuery(this).text('open')
            .click(showDiv)
            .siblings(".div").hide(400)
    }

    function showDiv(e) {
        e.preventDefault();
        jQuery(this).text('close')
            .click(hideDiv)
            .siblings(".div").show(400)
    }
    jQuery('.hover').click(showDiv);
});