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为disappear的div。您可以设置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();
        }
    });
});

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

Fiddle Example

在导航链接悬停时隐藏<p> </p>

2 个答案: