http://www.visualbinary.net/files/tu...s/sliding-div/
esta muy bien pero me gustaria que cuando muestra el div oculto este se quede abierto MIENTRAS PASO EL MOUSE SOBRE EL. supongo que se vuelve a cerrar con rollover o hover y necesitaria que se cierre con mouseout o algo asi.
el codigo completo del ejemplo es:
Código:
gracias <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Visual Binary | Tutorials | Sliding Div</title>
<style type="text/css">
html { margin:0; padding:0; }
body { margin:10px auto; padding:0; width:500px; }
img { border:none; }
div.slide { width:500px; height:334px; position:relative; overflow:hidden; }
div.caption { margin:0; background:#eee; color:#444; position:absolute; bottom:-40px; width:100%; }
h1.title { margin:0; font:bold 14px Arial; padding:5px; height:30px; }
#attribution { font:bold 11px Arial; color:#888; position:fixed; bottom:0px; left:0; width:100%; }
#attribution a { color:#aaa; text-decoration:none; }
#attribution p { margin:0; padding:5px; background:#eee; }
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".photo").hover(
function() {
$(this).next().animate({
bottom: "0",
}, 400 );
},
function() {
$(this).next().animate({
bottom: "-40px",
}, 400 );
}
);
});
</script>
</head>
<body>
<div class="slide">
<div class="photo"><a href="http://www.flickr.com/photos/antifluor/2627534389/"><img src="http://farm4.static.flickr.com/3118/2627534389_0223dabfbb.jpg" alt="http://www.flickr.com/photos/antifluor/2627534389/"></a></div>
<div class="caption"><h1 class="title">Caption</h1></div>
</div>
<div id="attribution">
<p>This work is licensed under a <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>. Images are properties of their respective owners.</p>
</div>
</body>
</html>
