jquery - .hover() anchor 元素并显示隐藏辅助元素

Question

<div class="navbar-header">   
 <a class="navbar-brand" href="{{ URL::route('admin.pages.index') }}">Laravel Admin</a> 
 <a class="slideout-toggle" href='/'>visit site</a>
</div>


<script>
    jQuery(".slideout-toggle").hide();
    jQuery(".navbar-brand").hover(
        function(){
            jQuery(".slideout-toggle").show();
        }, 
        function(){
            jQuery(".slideout-toggle").hide();
        }

    );
</script>

当然，当鼠标停止悬停时 .navbar-brand - .hide() 启动。但是“访问站点”在我点击它之前就消失了。我怎样才能使它可点击？因此，将鼠标悬停在 .navbar-brand 我的 slideout-toggle anchor 元素上显示并且我可以单击它!

我想我对事件的选择不正确。

Answer 1

不要将悬停事件放在 anchor 上，而是将两个 anchor 放在一个元素(例如 span 或 div)中，然后将悬停事件应用于该元素。

http://jsfiddle.net/isherwood/hs4nU/

<div id="link-wrapper"> 
    <a class="navbar-brand" href="{{ URL::route('admin.pages.index') }}">Laravel Admin</a>  
    <br />
    <a class="slideout-toggle" href='/'>visit site</a>
</div>


$(".slideout-toggle").hide();

$("#link-wrapper").hover(function () {
    $(".slideout-toggle").slideDown();
},
function () {
    $(".slideout-toggle").slideUp();
});

悬停功能实际上可以像这样简化:

http://jsfiddle.net/isherwood/hs4nU/2/

$("#link-wrapper").hover(function () {
    $(".slideout-toggle").slideToggle();
});