Question

当我将鼠标悬停在文字链接上时，如何让div显示。当鼠标悬停在链接上时，我正在制作导航栏并想要显示某些内容。我该怎么做我想使用css可见性。

CSS代码

<a href="#" class="contentmenubutton">
  <div id="hoverbar"></div>
  <div class="textnav">Testing</div>
</a>

}

HTML code：

append

Answer 1

一种方法：默认情况下，将div的可见性设置为隐藏。将鼠标悬停在链接上时，将显示div。

HTML

<a href="#">Text</a>
<div></div>

CSS

div {
    height: 20px;
    width: 20px;
    background-color: green;
    visibility: hidden;
}

a:hover + div {
    visibility: visible;
}

工作JSFiddle。

注意：在标题中，您说您希望div变为不可见，在帖子中，您希望它变为可见。下次要注意这一点。

如果你希望div在隐藏在链接上时变得不可见：

只需确保默认情况下div是可见的（它已经是，你不需要CSS）。并将隐藏变为隐藏，如下所示：

a:hover + div {
    visibility: hidden;
}

Answer 2

使用JavaScript（在本例中为jQuery），您可以通过使用jQuery hover方法实现此目的：

<强> HTML

// A link to hover
<a href="#" id="toggleDivVisibility">Testing</a>
// A div to hide once link is hovered
<div id="divHiddenUntilHover">im invisible when contentmenubutton is hovered</div>

<强>的JavaScript

// Wait for dom to be ready
$(function () {
    // Make use of the hover method, pass it two anonymous functions
    $('#toggleDivVisibility').hover(function() {
        // First function: triggers when hovered.
        $('#divHiddenUntilHover').hide();
    }, function() {
        // Second function triggers when mouse leaves the element.
        $('#divHiddenUntilHover').show();
    });
});

无jQuery示例：

<强> HTML

<a href="#" id="foo">
    This is some anchor element
</a>
<div id="bar">
    This div will hide when element with id of 'foo' is hovered
</div>

<强>的JavaScript

var elementToHover = document.getElementById('foo'),
    elementToHide = document.getElementById('bar');

elementToHover.addEventListener("mouseover",function(){
    elementToHide.style.display = "none";
});
elementToHover.addEventListener("mouseout",function(){
    elementToHide.style.display = "block";
});

如何通过将鼠标悬停在文本链接上使div隐藏？

2 个答案: