Проблема jQuery с одним из моих divs

EDIT: Я получил мой .panel div, чтобы не запускать всю страницу, добавив четкость: оба в CSS. Спасибо, ребята, за вашу помощь и предложения.Проблема jQuery с одним из моих divs

Пожалуйста, ознакомьтесь с небольшим проектом я работаю на практику моего HTML/CSS/JS в http://opmet.net

У меня возникли проблемы с наведению мыши, запускающей колонтитулом анимации. Я только хочу переключить нижний колонтитул, когда я нахожусь в/из #opmetAbout или #panel. Если вы посмотрите на HTML, вы увидите, что класс .panel в div вокруг #opmetAbout и #panel дает желаемый эффект зависания.

По какой бы то ни было причине эффект панели срабатывает, когда вы навешиваете среднюю прокладку между #right (Sleep Time) & #left (Время пробуждения).

Может кто-нибудь объяснить, почему это происходит и как это исправить?

Спасибо!

PS Я знаю, что фактические калькуляторы времени и времени не имеют функциональности. Любые предложения относительно того, как сделать это с помощью js, тоже приветствуются.

источник

2013-06-25 plooms

Проблема была в .panel DIV я обернуты вокруг моего #footer и #panel побежал через всю страницу. Любое пустое пространство между div на странице вызовет jQuery. Чтобы предотвратить пропущение .panel div через страницу, я сделал CSS таким образом. Спасибо за вашу помощь и предложения, которые привели меня к такому выводу.

.panel { 
    clear:both; 
}

источник

2013-06-27 01:15:57 plooms

Изменить код так:

<body> <!-- this tag was in the wrong place.... fix that! --> 
<h1 id="header2"><div>Tempo</div></h1> 
<div id="floatholders"> <!-- this tag is new --> 
    <div id="left" ><br></br> 
    <!-- content goes here --> 
    </div> 
    <div id="right" > 
    <!-- content goes here --> 
    <div> 
</div> 
<!-- this part stays the same... --> 
<div id="footerOpmet">opmeT</div> 
<div class="panel"> 
    <div id="footerAbout">About</div> 
    <div id="panel"> 
     <!-- content goes here --> 
    </div> 
</div> 
</div> <!-- don't forget to close all the divs --> 
</body>

или изменить JavaScript, как это:

$("#footerAbout").mouseenter(function(){ 
    $("#panel").slideToggle(); 
}); 

$("#footerAbout").mouseleave(function(){ 
    $("#panel").slideToggle(); 
});

источник

2013-06-25 03:30:06 Hogan

Спасибо за совет Hogan. Я изначально был таким, а затем поместил div вокруг #footerAbout и #footerPanel, так что они вели себя одинаково в одно и то же время. Я мог бы изменить его на то, что вы рекомендовали выше, но затем все возвращается в #panel и #AboutHover, запуская переключатель по отдельности. Любые другие предложения по этому поводу? Он работает так, как я хочу, за исключением того, что он срабатывает, когда вы наводите курсор на центральную прокладку. Еще раз спасибо! – plooms

@ Keith Я не знаю, что вы имеете в виду, обратившись назад. Если вы хотите, чтобы он срабатывал только на одном div, вам нужно настроить таргетинг на этот div, центральная часть страницы является частью div, на который вы нацеливались, поэтому он действует так, как есть. – Hogan

Я сделал CSS-класс .panel {}, чтобы обернуть div вокруг #aboutOpmet и #panel, чтобы они вели себя одинаково в одно и то же время. Короче, у меня есть только div class = "panel", завернутый только вокруг div id = "aboutOpmet" и div id = "panel".Любые идеи относительно того, почему этот div-класс поднимается по всей странице? Возможно, мне нужно изменить свойство css, например display:? Спасибо :) – plooms

Попробуйте

$('#footerAbout').hover(function(){ 
    $("#panel").slideToggle(); 
})

Это может вызвать проблемы, путем сокрытия #panel когда мышь курсирует над ним

var panelTimer; 
$('#footerAbout').hover(function(){ 
    $("#panel").slideToggle(); 
}, function(){ 
    panelTimer = setTimeout(function(){ 
     $("#panel").slideToggle(); 
    }, 50) 
}) 

$("#panel").mouseenter(function(){ 
    clearTimeout(panelTimer) 
})

Update

заменить

$(".panel").mouseenter(function(){ 
    $("#panel").slideToggle(); 
}); 

$(".panel").mouseleave(function(){ 
    $("#panel").slideToggle(); 
});

$('#footerAbout').hover(function(){ 
    $("#panel").slideToggle(); 
})

источник

2013-06-25 03:36:53

Привет за вашу помощь. Для меня зависание над #footerAbout и #panel отлично работает. Проблема заключается в том, что вы наводите курсор на среднюю прокладку (прямая вертикальная линия вниз по середине основного содержимого), которая также запускает анимацию. Я попробовал ваш код и попытался удалить свой соответствующий код, но не смог заставить его работать совершенно правильно. Еще раз спасибо за вашу помощь, это заставило меня думать и экспериментировать. – plooms

@ Похоже, что события 'mouseenter' и' mouseleave' зарегистрированы в '$ (". Panel ")' меняют его на $ ('# footerAbout') и проверяют –

Я зарегистрировал его в .panel, чтобы #panel и #footerAbout будет иметь такое же поведение. Проверьте править. Я понял, спасибо за ваш вклад. – plooms

Проблема jQuery с одним из моих divs

ответ

Смежные вопросы