Fade-in and out on 2 different mouseover links
hi all
the below code replaces one background image (day.jpg) with another
(night.jpg) on clicking anywhere in the page.
but can someone pls show me what code is needed to have the new
background (night.jpg) fade in only on mouseover of the corresponding
"night" text; and then fade back out on mouseover of the "day" text to
reveal the original background (day.jpg)?
$(document).ready(function(){
$(document.body).click(function () {
$("div:hidden:first").fadeIn("slow");
});
});
the CSS:
body { background:URL(day.jpg); width:800px; height:600px;}
div#one { background:URL(night.jpg); display:none; width:800px;
height:600px;
position:absolute; top: 0; left: 0}
#choice {color:red; cursor:pointer; position: absolute; z-index:
1; }
the HTML:
<div id=choice><span>night</span> | <span>day</span></div>
<div id="one"></div>