2010年3月24日 星期三

CSS 製作出浮動next prev 效果

CSS

div ._next:hover {
background: url(images/btnNext.png) center right no-repeat;
cursor: pointer;
} /* Next button */
div ._previous:hover {
background: url(images/btnPrevious.png) center left no-repeat;
cursor: pointer;
}

._hoverContainer {
position: absolute;
top: 0;
width: 80%;
height: 100%;
z-index: 2000;
}

a._next {
background: url(images/btnNext.png) 10000px 10000px no-repeat;
display: block;
float: right;
height: 100%;
text-indent: -10000px;
width: 49%;
}

a._previous {
background: url(images/btnNext.png) 10000px 10000px no-repeat;
display: block;
float: left;
height: 100%;
text-indent: -10000px;
width: 49%;
}

Body 內...

<div class="_hoverContainer">
<a class="_next" href="#">next</a><a class="_previous" href="#">previous</a>
</div>




【下列文章您可能也有興趣】

沒有留言: