я уже сделал обычные кнопки, но мне нужно сделать кнопку поиска в левом меню на этом веб-сайте http://www.coolwebmasters.com/
когда я наводил на #profilename, он исчезает
<div id="container">
<div class="prof"><a href="index.php"><img src="imgs/profile.png" alt="Messages"/>
</a></div>
</div>
<div id="profilename">Name</div>
$(".prof").hover(function(){
$('#profilename').show('slide', {direction: 'left'}, 280);
}, function() {
$('#profilename').hide('slide', {direction: 'left'}, 280);
});
Это связано с тем, что когда вы перемещаете мышь из элемента .prof
, #profilename
скрывается.
Пытаться
jQuery(function ($) {
$('.prof').hover(function () {
var $target = $('#profilename');
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).show('slide', {direction: 'left'}, 280);
}, function () {
var $target = $('#profilename');
var timer = setTimeout(function () {
$target.stop(true, true).hide('slide', {direction: 'left'}, 280);
}, 200);
$target.data('hoverTimer', timer);
});
$('#profilename').hover(function () {
clearTimeout($(this).data('hoverTimer'));
}, function () {
$(this).stop(true, true).hide('slide', {direction: 'left'}, 280);
});
});
Демо: скрипка
В приведенном выше решении мы даем пользователю .prof
#profilename
переходить от .prof
к элементу #profilename
, если это так, мы .prof
#profilename
, поэтому предотвращается скрытие элемента.