Блог

Главная - Вопросы по программированию - .hover() привязать элемент и показать скрыть вторичный

.hover() привязать элемент и показать скрыть вторичный

#jquery

#jquery

Вопрос:

 <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 привязочный элемент, и мне разрешено щелкнуть по нему!

Я предполагаю, что мой выбор событий неверен.

Комментарии:

1. Работает — @isherwood — диапазон находится выше по дереву или является родительским для привязки, следовательно, задерживает метод hide(). Спасибо.

Ответ №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();
});

Ответ №2:

Нет необходимости в JS:

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

Демонстрация:http://jsfiddle.net/k9jjM