как исправить это странное поведение? Наведите ссылку -> fadeIn в div, mouleave -> fadeOut в div

Попытка сделать так, чтобы форма для входа отображалась при наведении курсора на ссылку Log In class="classB" , а другое поле с информацией при наведении на ссылку My Info с class="classA" , затем поле должно исчезать, когда мышь покидает поле и связь. Но эффект слишком странный, он не работает должным образом. код ниже и см. здесь: http://jsfiddle.net/75HYL/11/

<ul class="links">
<li class="classA"><a><span>My info</span></a></li>
<li class="classB"><a><span>Log in</span></a></li>
</ul>

<div id="userInfo">CONTENT GOES HERE. THIS BOX SHOULD STAY VISIBLE WHEN MOUSE IS ON IT, FADEOUT WHEN MOUSE LEAVES</div>
<div id="login" >
<div class="form">
<form>
LOGIN FORM HERE. THIS BOX SHOULD STAY VISIBLE WHEN MOUSE IS ON IT, FADEOUT WHEN MOUSE LEAVES
</form>
</div>
</div>

<style>
.links li { display:inline-block;cursor:pointer; }
.links li { padding:0 4px 0 1px; }

.links li.classA {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
.links li.classB {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}

.links li.classA span {}
.links li.classB span {}

.links li.classA:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
.links li.classB:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}

.links li.classA a {color:#fff;text-transform:uppercase;background:#00aaff;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
.links li.classB a {color:#00aaff;text-transform:uppercase;background:orange;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}


#login {display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
#userInfo{display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
</style>

<script>
$("li.classA").hover(function() {
$("#userInfo").fadeIn('fast').css('display', 'block');
});
$("#login, .classA").mouseleave(function() {
$("#userInfo").fadeOut('fast').css('display', 'none');
});


$("li.classB").hover(function() {
$("#login").fadeIn('fast').css('display', 'block');
});
$("#login, .classA").mouseleave(function() {
$("#login").fadeOut('fast').css('display', 'none');
});
</script>

jquery show-hide mouseover mouseenter mouseleave
person mlclm    schedule 11.06.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward 

$("li.classA").hover(function() {
    $("#userInfo").fadeIn('fast').css('display', 'block');
}, function() {
    $("#userInfo").fadeOut('fast').css('display', 'none');
});


$("li.classB").hover(function() {
    $("#login").fadeIn('fast').css('display', 'block');
}, function() {
    $("#login").fadeOut('fast').css('display', 'none');
});

В обработчике наведения есть часть «зависания». Я пробовал это с вашей скрипкой, и это работает.

person Jeff Watkins    schedule 11.06.2012
comment
Нет, это не то, чего я хочу достичь. Я пытаюсь, чтобы КОРОБКИ С СОДЕРЖИМЫМ все еще были видны, когда мышь находится на ССЫЛКЕ ИЛИ на КОРОБКЕ. Блок с содержимым должен исчезать, когда мышь покидает ссылку или блок. В противном случае, как вы можете заполнить форму, которая находится в поле? так же как на том сайте www.conforama.fr на верхней ссылке Compte вверху экрана. - person mlclm; 11.06.2012

arrow_upward
1
arrow_downward

Код определенно не оптимизирован, но если вы ищете быстрое исправление, просто кажется, что вы опечатались во втором #login, .classA в обработчике mouseleave для того, что предположительно должно быть для #login, .classB.

Вот исправленный jsFiddle.

person Richard Neil Ilagan    schedule 11.06.2012
comment
Извините, но это не то, что я спросил. Я хочу, чтобы КОРОБКА С СОДЕРЖАНИЕМ все еще была видна, когда мышь находится на ССЫЛКЕ ИЛИ на КОРОБКЕ. Поле с содержимым должно исчезать только тогда, когда мышь покидает ссылку или поле. В противном случае, как вы можете заполнить форму, которая находится в поле? так же, как на этом сайте www.conforama.fr на верхней ссылке Compte вверху экрана, наведите на нее курсор, и вы увидите форму. Наведите курсор мыши на ссылку ИЛИ форму, форма исчезнет - person mlclm; 11.06.2012
comment
Тогда вам было бы очень полезно прояснить это в своем вопросе. То, как это сформулировано прямо сейчас, довольно неоднозначно, учитывая, чего вы действительно хотите достичь. Не думайте, что мы знаем, что вы собираетесь сделать, даже если это кажется вам очевидным. - person Richard Neil Ilagan; 11.06.2012