Works good in FF, in IE6 the images appear, but when I mouse out the images stay, even when I mouse over the next preview.
IE6 images stay, need to have them go away on mouse out.
<style type="text/css">
/* =Hoverbox Code
----------------------------------------------------------------------*/
.hoverbox
{
cursor: default;
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -300px;
left: -95px;
z-index: 1;
}
.hoverbox img
{
background: fff;
border-color: aaa ccc ddd bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 125px;
}
.hoverbox li
{
background: eee;
border-color: ddd bbb aaa ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hoverbox .preview
{
border-color: 000;
width: 300px;
height: 300px;
}
</style>
<ul class="hoverbox">
<li><a href="#">View Larger<img src="products/myimage.jpg" alt="description" class="preview"></a></li>
</ul>
IE6 images stay, need to have them go away on mouse out.
<style type="text/css">
/* =Hoverbox Code
----------------------------------------------------------------------*/
.hoverbox
{
cursor: default;
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -300px;
left: -95px;
z-index: 1;
}
.hoverbox img
{
background: fff;
border-color: aaa ccc ddd bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 125px;
}
.hoverbox li
{
background: eee;
border-color: ddd bbb aaa ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hoverbox .preview
{
border-color: 000;
width: 300px;
height: 300px;
}
</style>
<ul class="hoverbox">
<li><a href="#">View Larger<img src="products/myimage.jpg" alt="description" class="preview"></a></li>
</ul>