List of items, hovering will show a thumbnail of the item
I have a list开发者_C百科 of image names on a page, I want to display a thumbnail when you hover over the image on the line you are on.
How can I do this? Any example code?
CONTENT OF CSS styles.css FILE
.secret {
display: none;
height: 20%;
background-color: #ccc;
position: absolute;
padding: 3px;
}
CONTENT OF scripts.js FILE
$(document).ready(function(){
$('.hoverMe').hover(function(event){
child = $(this).children();
child.css("left", event.pageX + 10);
child.css("top", event.pageY + 10);
child.show();
}, function(){
$(this).children().hide();
})
});
HTML CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="styles.css"/>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<ul>
<li class="hoverMe">Image One
<img class="secret" src="img/image1.jpg" alt="Image 1"/>
</li>
<li class="hoverMe">Image Two
<img class="secret" src="img/image2.png" alt="Image 2"/>
</li>
<li class="hoverMe">Image N
<img class="secret" src="img/imageN.jpg" alt="Image N"/>
</li>
</ul>
</body>
</html>
加载中,请稍侯......
精彩评论