Is there a better way to show the pause hover in this simple slideshow?
<p>Is there a better way to <strong>add the hover</strong> to this simple slideshow. I want the div to fade in like this to show it's paused and this was the only way I could come up with. I'm still learning jQuery.</p>

<p>This is the 24hr DEMO: <a href="http://trialsites.ihoststudio.com/trialsite366742/website/" rel="nofollow">http://trialsites.ihoststudio.com/trialsite366742/website/</a></p>

<p><em><strong>Note</em></strong> <em>Doesn't effect this but it's done in a wysiwyg program so the html is limited</em></p>

<p>css:</p>

<pre><code>#pause { 
display: none;
width: 70px;
background: white; 
padding: 2px;
border-radius: 6px;
border:1px solid black; 
font:15px/1.1em arial;
color: black;
text-align:center;
}
</code></pre>

<p>jQuery:</p>

<pre><code>$(function() {
var intervalId;
$("#A &gt; div:gt(0)").hide();
startInterval();
$('#A &gt; div').mouseover(function() { stopInterval(); });
$('#A &gt; div').mouseout(function() { startInterval(); });
$('#A &gt; div').hover(
function() { $('#pause').fadeIn(); },
function() { $('#pause').fadeOut(); }
);

function stopInterval() {
clearInterval(intervalId);
}

function startInterval() {
intervalId = setInterval(function() {
$("#A &gt; div:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#A');
}, 3000);
}

});
</code></pre>
