用CSS也可以的,仅供参考.hoverbox
{
cursor: default;
list-style: none;
}.hoverbox a
{
cursor: default;
border-bottom : 0px solid #fcb9b9;
}
.hoverbox a .preview
{
display: none;
}.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -100px;
z-index: 101;
}.hoverbox img
{
background: #fff;
border-color: #FCB9B9;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 5px;
vertical-align: top;
width: 100px;
height: 75px;
}.hoverbox li
{
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}.hoverbox .preview
{
border-color: #9E9B9A;
width: 300px;
height: 225px;
}
{
cursor: default;
list-style: none;
}.hoverbox a
{
cursor: default;
border-bottom : 0px solid #fcb9b9;
}
.hoverbox a .preview
{
display: none;
}.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -100px;
z-index: 101;
}.hoverbox img
{
background: #fff;
border-color: #FCB9B9;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 5px;
vertical-align: top;
width: 100px;
height: 75px;
}.hoverbox li
{
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}.hoverbox .preview
{
border-color: #9E9B9A;
width: 300px;
height: 225px;
}
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function ShowPreview()
{
var bigPicture = window.document.getElementById("picView");
bigPicture.style.display="block";
}
function HidePreview()
{
window.document.getElementById("picView").style.display="none";
}
</script>
</head>
<body>
<div style="z-index:0;">
<table>
<tr>
<td><img id="smallPicture" style=" left:100px; top:50px; z-index:0;" src="ss/b.jpg" alt="" onmouseover="ShowPreview('smallPicture')" onmouseout="HidePreview()" /></td>
<td>商品介绍</td>
</tr>
</table>
</div>
<div id="picView" style="position:absolute; z-index:1; display:none;" >
<img id="bigPicture" src="ss/a.jpg" alt="" />
</div>
</body>
</html>