jQuery mouseover issues
<p>I have image, and on mouse over it fades in two arrows (on the left and right sides), then on mouseout it fades those arrows out. My problem is that when the user hovers over the arrows, the image considers it a mouseout (since the arrows float above the image), and fades the arrows out, causing an infinate loop of fading in/out until you move the mouse away. What is the best way to prevent the arrows from fading out when the mouse hovers over them? I've tried one method, which you'll see below, but that hasen't been working out...</p>

<p>Here's some code:</p>

<pre><code>$(".arrow").mouseover(function() {
 overArrow = 1;
 $("#debug_oar").text(1)
})

$(".arrow").mouseout(function() { 
 overArrow = 0;
 $("#debug_oar").text(0)
})

$("#image").mouseout(function() {
 $(".arrow").fadeOut(250,function() { $(".arrow").remove();})
})

$("#image").mouseover(function() {
 if(overArrow == 0) {
  $("#image").after("&lt;div class='arrow' id='lArrow' style='display:none;position:absolute;'&gt;&amp;larr;&lt;/div&gt;&lt;div class='arrow' id='rArrow' style='display:none;position:absolute;'&gt;&amp;rarr;&lt;/div&gt;")
  // Define variables...
  aWidth = $("#lArrow").width();
  aHeight = $("#lArrow").height();
  height = $("#image").height()
  width = $("#image").width()
  pos = $("#image").position();
  // Calculate positioning
  nHeight = height/2
  y = pos.top + nHeight - (aHeight/2)
  // Position the left arrow
  $("#lArrow").css("top",y)
  $("#lArrow").css("left",pos.left+10)
  // Now the right...
  $("#rArrow").css("top",y)
  $("#rArrow").css("left",pos.left+width-aWidth-20)
  // Display 'em
  $(".arrow").fadeIn(250);
  // Debug info
  $("#debug_x").text(pos.left)
  $("#debug_y").text(y)
  $("#debug_height").text(height)
 }
})
</code></pre>

<p>Thanks</p>

<p>For those who are interested in the final code:</p>

<pre><code>$("#image").mouseenter(function() {
 $("#image").append("&lt;div class='arrow' id='lArrow' style='display:none;position:absolute;'&gt;&amp;larr;&lt;/div&gt;&lt;div class='arrow' id='rArrow' style='display:none;position:absolute;'&gt;&amp;rarr;&lt;/div&gt;")
 // Define variables...
 aWidth = $("#lArrow").width();
 aHeight = $("#lArrow").height();
 height = $("#image").height()
 width = $("#image").width()
 pos = $("#image").position();
 // Calculate positioning
 nHeight = height/2
 y = pos.top + nHeight - (aHeight/2)
 // Position the left arrow
 $("#lArrow").css("top",y)
 $("#lArrow").css("left",pos.left+10)
 // Now the right...
 $("#rArrow").css("top",y)
 $("#rArrow").css("left",pos.left+width-aWidth-20)
 // Display 'em
 $(".arrow").fadeIn(250);
 // Debug info
 $("#debug_x").text(pos.left)
 $("#debug_y").text(y)
 $("#debug_height").text(height)
});
$("#image").mouseleave(function() {
 $(".arrow").fadeOut(250,function() { $(".arrow").remove();})
})
</code></pre>
