一个完全不同的解决方案是使用单个图像作为精灵。这可以更有效,因为它减少了 http 请求。
HTML
<div style="position:fixed;z-index:1;">
<div class="arrowContainer">
<a class="left" href="javascript:{}">L</a>
<a class="top" href="javascript:{}">U</a>
<a class="bottom" href="javascript:{}">D</a>
<a class="right" href="javascript:{}">R</a>
</div>
</div>
CSS
.arrowContainer
{
position:relative;
width:50px;
height:50px;
}
.arrowContainer a
{
background-image:url(http://i.stack.imgur.com/RtaFK.png);
background-repeat:no-repeat;
text-indent:-9999px;
display:block;
width:20px;
height:20px;
position: absolute;
}
.arrowContainer .top
{
top: -2px;
left: 15px;
background-position: -24px top;
}
.arrowContainer .left
{
top: 15px;
left: 0;
}
.bottom {
bottom: 0;
left: 15px;
background-position: -52px 2px;
}
.right {
top: 15px;
right: 0;
background-position: -76px top;
}
您可能需要调整元素和/或背景图像的位置,但这是一个好的开始。
如果要添加背景颜色,请使用具有透明背景的图像。
小提琴:http: //jsfiddle.net/tqH3m/1/
更新
最好不要使用图像。您可以使用纯 css 并将背景颜色应用于容器。HTML与上面相同
CSS
.arrowContainer
{
position:relative;
width:50px;
height:50px;
background-color:#CCC;
}
.arrowContainer a
{
text-indent:-9999px;
display:block;
width:0;
height:0;
position: absolute;
}
.top
{
top: 0;
left: 15px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
.top:hover
{
border-bottom: 10px solid #F00;
}
.left
{
top: 15px;
left: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid black;
}
.left:hover
{
border-right:10px solid #F00;
}
.bottom {
bottom: 0;
left: 15px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}
.bottom:hover {
border-top: 10px solid #F00;
}
.right {
top: 15px;
right: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid black;
}
.right:hover {
border-left: 10px solid #F00;
}
小提琴:http: //jsfiddle.net/tqH3m/2/