悬停标签时如何弹出 div <a> ？

Question

我在<a>标记悬停时显示div有麻烦，我无法解决这个问题，我的代码在JSFIDDLE中。

<a>标签将是可见的，当我点击或悬停在<a>标签下面的div应该是可见的。

我的部分代码是这样的:

<a class="search dropbox_btn" title="Ara" href="#drop-search" id="tour-search">Ara</a>

如何使用CSS, JavaScript或jQuery?

更新:我想在下面显示div:

<div id="pill_identifier_fmt">

Answer 1

纯CSS解决方案:

JSFIDDLE

#pill_identifier_fmt{
    display:none;
}
#tour-search:hover + div#pill_identifier_fmt{
   display:block;
}
#pill_identifier_fmt:hover{
    display:block;
}

Answer 2

检查DEMO Fiddle。如果您希望在表单上执行操作，这就是解决方案。

#tour-search查找id为'tour-search'的<a>标记。如果你有多个<a>标签，使用这个。否则只要$('a')就可以了。

$("a#tour-search").hover(function(){
   $("#pill_identifier_fmt").css("display","block");
});

或

$("a#tour-search").hover(function(){
   $("#pill_identifier_fmt").show();
});

如果你有多个<a>标签

$("a").hover(function(){
   $(this).closest('div').show();
});

Answer 3

尝试在锚标记的悬停位置隐藏和显示div。

$('.search').hover(
    function() {
         $('#pill_identifier_fmt').show(1000)}, 
    function(){
         $('#pill_identifier_fmt').hide(1000)}
);

更新:

如果你只是想在悬停后显示div而不是隐藏它，那么你可以这样做

 $('.search').hover(
        function() {
             $('#pill_identifier_fmt').show(1000)}
    );

Answer 4

使用jQuery，可以添加下面的代码。这样做的好处是，当您将鼠标悬停在远离<a>标签的位置时，表单不会消失。

JSFiddle

CSS:

.showAlways {
    display: block;
}
.showHover {
    display: none;
}
.showHover:hover {
    display: block;
}

JavaScript:

$(document).ready(function() {
    $('#pill_identifier_fmt').addClass('showHover');
    $('#tour-search').hover(function() {
        $('#pill_identifier_fmt').addClass('showAlways');
        $('#pill_identifier_fmt').removeClass('showHover');
    }, function() {
        setTimeout(function() {
            $('#pill_identifier_fmt').addClass('showHover');
            $('#pill_identifier_fmt').removeClass('showAlways')
        }, 1000);
    });
});