#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