Dear all,
I've got two images absolutely positioned via css to overlap. I'm
trying to set a function that will show a caption for each image while
the mouse hovers over the image. The following code works in safari
and FF; however, if the images are given a title attribute, FF shows
and hides the caption each time the mouse is moved inside the image
boundary rather than just showing the caption as long as the mouse is
within the boundary.
Something I'm not understanding about hover(), or a bug in FF?
////// Hover Caption Experiment ////////////////////
$("#night").css({cursor:'pointer'}).hover(function () {
$("#nightCap").show("slow");
},
function () {
$("#nightCap").hide("slow");
});
$("#superchris").css({cursor:'pointer'}).hover(function () {
$("#superchrisCap").show("slow");
},
function () {
$("#superchrisCap").hide("slow");
});
<!-- HTML -->
<img id="superchris" style="position: absolute; top: 80px; left: 20px"
src="images/cirqueDeCrumpe.gif" />
<div id="superchrisCap" style="display: none">Some caption text for
superchris</cite></div>
<img id="night" style="position: absolute; top: 65px; right: 420px;
border-style: solid; border-width: 4px; border-color: #444"
src="images/nightJourney.jpg" />
<div id="nightCap" style="display: none">some caption text for night</
div>
