jquery - 隐藏一个当导航链接悬停时

Question

当链接悬停时，我试图隐藏一个<p>元素。该网站正在运行drupal，我正在使用superfish导航栏的模块。当我将鼠标悬停在导航链接上时，辅助导航栏会下降。

我想要发生的是当辅助导航栏下降以使网站的标语消失时。换句话说，我希望辅助导航栏掩盖或取代口号。关于如何让它发挥作用的任何想法？

Answer 1

您可以使用 JavaScript，如下所示：

<a href="#" id="hoverthis" onmouseover='document.getElementById("disappear").style.display="none";'>When you over this, the second div with disappear.</a>

<p id="disappear">I will disappear when hoverthis is hovered.</p>

上面的脚本设置元素（在本例中为p）以将 CSS 代码应用display:none到 id 的 div disappear。您可以设置 JavaScript 以虚拟地应用任何 CSS 属性。就像您可以使用 JavaScript 使 div 重新出现一样。这也可以使用 jQuery 来完成，如下所示：

$('#disappear').hide();

或从 DOM 中删除：

$('#disappear').remove();

或让它重新出现：

$('#disappear').show();

这是速记。你也可以设置 jQuery 来做这样的事情：

$('#disappear').css("display","none");

使用上面的代码，就像纯 JavaScript 解决方案一样，可以编辑以应用任何 CSS 属性。

您可以编辑此脚本以满足您的需要。告诉我这是否有效，或者您是否需要进一步的帮助。

如果这对您有帮助，请记住单击此答案附近的检查。这真的很有帮助。谢谢。:)

Answer 2

那么这里是一个如何做你正在谈论的事情的例子。

$(document).ready(function(){
    $('a').live({
        mouseenter:function(){
            $('p').hide();
        },
        mouseleave:function(){
            $('p').show();
        }
    });
});

显然你会使用更具体的选择器。

小提琴示例