jQuery hoverIntent - What am I doing wrong when I split the function?
<p>I split the function for hoverintent and that worked but now the div isn't hiding until the mouse leaves?</p>

<p>I wrote this it works okay, I'm new to jquery as you can probably tell.</p>

<pre><code>$("img.nexthover").hover(
function() { this.src = this.src.replace("_off", "_on");
},
function() { this.src = this.src.replace("_on", "_off");
});
$('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').addClass('nextHide');
$('.nextbuttonA').hover(function() {
$('#A.nextHide').fadeIn("slow");        
$('#B,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut();
});
$('.nextbuttonB').hover(function() {
$('#B.nextHide').fadeIn("slow");
$('#A,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut();
});     
$('.nextbuttonC').hover(function() {
$('#C.nextHide').fadeIn("slow");
$('#A,#B,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut();
});         
$('.nextbuttonD').hover(function() {
$('#D.nextHide').fadeIn("slow");
$('#A,#B,#C,#E,#F,#G,#H,#I,#J.nextHide').fadeOut();
}); 
$('.nextbuttonE').hover(function() {
$('#E.nextHide').fadeIn("slow");
$('#A,#B,#C,#D,#F,#G,#H,#I,#J.nextHide').fadeOut();
}); 
$('.nextbuttonF').hover(function() {
$('#F.nextHide').fadeIn("slow");
$('#A,#B,#C,#D,#E,#G,#H,#I,#J.nextHide').fadeOut();
}); 
$('.nextbuttonG').hover(function() {
$('#G.nextHide').fadeIn("slow");
$('#A,#B,#C,#D,#E,#F,#H,#I,#J.nextHide').fadeOut();
}); 
$('.nextbuttonH').hover(function() {
$('#H.nextHide').fadeIn("slow");
$('#A,#B,#C,#D,#E,#F,#G,#I,#J.nextHide').fadeOut();
}); 
$('.nextbuttonJ').hover(function() {
$('#I.nextHide').fadeIn("slow");
$('#A,#B,#C,#D,#E,#F,#G,#H,#J.nextHide').fadeOut();
}); 
$('.nextbuttonK').hover(function() {
$('#J.nextHide').fadeIn("slow");
$('#A,#B,#C,#D,#E,#F,#G,#H,#I.nextHide').fadeOut();
});
$('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').click(function(){
    $('.nextHide').fadeOut();
});
</code></pre>

<p>To get hoverIntent to work I split the function like this:</p>

<pre><code>$("img.nexthover").hover(
function() { this.src = this.src.replace("_off", "_on");
},
function() { this.src = this.src.replace("_on", "_off");
});
$('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').addClass('nextHide');

$('.nextbuttonA').hoverIntent(function() {
$('#A.nextHide').fadeIn("slow");
}, function() {
$('#B,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut();
});

$('.nextbuttonB').hoverIntent(function() {
$('#B.nextHide').fadeIn("slow");
}, function() {
$('#A,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut();
});

---etc----
</code></pre>

<p>But now the div isn't hiding until you leave the button like before?
Sorry if this is too newbie I'm teaching myself by jumping in...</p>
