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

尝试此操作隐藏并在悬停锚标记时显示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 2

纯CSS解决方案：

<强> JSFIDDLE

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

Answer 3

使用 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);
    });
});

Answer 4

选中 DEMO Fiddle 。如果您希望对表单执行操作，这就是解决方案。

a＃tour-search 会找到一个<a>标记，其中包含ID＆＃39; tour-search＆＃39;。如果您有多个<a>标记，请使用此标记。只要$('a')就好了。

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

});

OR

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

});

如果您有多个<a>代码

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

});

如何在悬停<a> tag?</a>时弹出div

4 个答案: