当导航链接悬停时隐藏 <p> [关闭]答案

【问题标题】：hide a <p> when Navigation link is Hovered [closed]当导航链接悬停时隐藏 <p> [关闭]
【发布时间】：2013-01-15 02:49:02
【问题描述】：

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

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

【问题讨论】：

请发布您的示例代码。

标签： jquery html css drupal superfish

【解决方案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为disappear的div。您可以设置 JavaScript 以虚拟地应用任何 CSS 属性。就像您可以使用 JavaScript 使 div 重新出现一样。这也可以用 jQuery 来完成，如下所示：

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

或从 DOM 中删除：

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

或者让它重新出现：

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

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

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

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

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

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

【讨论】：

【解决方案2】：

这里有一个例子说明如何做你所说的。

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

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

Fiddle Example

【讨论】：