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()时，就会开始。但是，请访问网站＆＃39;在我点击它之前就消失了。如何使其可点击？所以悬停.navbar-brand我的slideout-toggle锚元素显示和我可以点击它！

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

Answer 1

不是将悬停事件放在锚点上，而是将两个锚点放在一个元素中，例如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();
});

Answer 2

不需要JS：

.navbar-header > .slideout-toggle{
    display: none;
}
.navbar-header:hover > .slideout-toggle{
    display: inline;
}

演示：http://jsfiddle.net/k9jjM/

.hover（）锚元素和show隐藏一个辅助

2 个答案: