0

Trying to make a form appear for login when mouseover on link Log In class="classB" , and another box with information when hover on link My Info with the class="classA" , then the box should fadeOut when mouse leaves the box and the link. But the effect is too weird, it's not working properly. code below, and see here: 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>
Cœur
  • 37,241
  • 25
  • 195
  • 267
mlclm
  • 725
  • 6
  • 16
  • 38

2 Answers2

1
$("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');
});

There's a "hover out" part to the hover handler. I've tried this with your fiddle and it works.

Jeff Watkins
  • 6,343
  • 16
  • 19
  • No, it 's not what i'm looking to achieve. I'm trying to have THE BOXES WITH CONTENTS still visible when mouse is on the LINK OR on THE BOX. The box with content should fadeOut when mouse leaves the link or the box. Otherwise, How can you fill the form that's in the box ? just like on that site www.conforama.fr on the top link "Compte" on top of the screen. – mlclm Jun 11 '12 at 10:38
1

The code's definitely not optimized, but if you're looking for the quick fix, it just seems that you mistyped a second #login, .classA on the mouseleave handler for what seems to supposedly be for #login, .classB.

Here's the corrected jsFiddle.

Richard Neil Ilagan
  • 14,627
  • 5
  • 48
  • 66
  • Sorry but this is not what I asked. I want to have THE BOX WITH CONTENT still visible when mouse is on the LINK OR on THE BOX. The box with content should only fadeOut when mouse leaves the link or the box. Otherwise, How can you fill the form that's in the box ? just like on that site www.conforama.fr on the top link "Compte" on top of the screen, mouseover it and you'll see a form. Mouseout the link OR the form, the form disappears – mlclm Jun 11 '12 at 10:39
  • Then it'd do you a lot of good to make that clear in your question. The way it's worded right now is pretty ambigious, considering what you really want to achieve. Don't assume that we know what you intend to do, even if it sounds obvious to you. – Richard Neil Ilagan Jun 11 '12 at 11:52