悬停的箭头面包屑

Question

所以我为我的新项目制作了一个定制的面包屑，当用户将鼠标悬停在链接上时，它应该填充该链接内的箭头。问题是，我该怎么办。我尝试了不同的技巧/黑客，但没有成功。我尝试使用不可见的边框或背景位置，但它们总是位置不对。

它的工作方式是当用户将鼠标悬停在链接上时，它使用2个图像作为面包屑的左箭头和右箭头。我只需要将它们正确定位即可。

HTML

<div id="bcbox">
<!-- start: nav -->
<ul id="breadcrumb"><li><a href="http://******.com/index.php" title="Home">Home</a></li>
<!-- start: nav_bit -->
<li><a href="http://*******.com/index.php">****** forums</a></li>
<!-- end: nav_bit --><!-- start: nav_bit -->
<li><a href="Forum-Headquarters">Headquarters</a></li>
<!-- end: nav_bit --><!-- start: nav_bit_active -->
<li style="padding-left: 10px;
padding-right: 10px;">Announcements &amp; Important Information</li>
<!-- end: nav_bit_active --></ul>
<!-- end: nav -->
</div>

CSS

#bcbox {
background:#292929;height:38px;line-height:38px;color:#acacac;width:100%;overflow:hidden;margin:0;padding:0;border-top: 1px solid #464646;border-bottom: 1px solid #464646;
}
#breadcrumb{
height:38px;line-height:38px;color:#acacac;width:1150px;overflow:hidden;margin:0 auto;padding:0;border-left: 1px solid #464646;
}

#breadcrumb li{
list-style-type:none;float:left
}

#breadcrumb a{
background: url(http://******.com/images/Orbit/bcline.png) no-repeat right;height:38px;display:block;text-decoration:none;color:#fff;padding-left:10px;padding-right:19px
}
#breadcrumb a:hover {
background-color: #505050;
background-image: url(http://******.com/images/Orbit/bcline-hover-left.png), url(http://*****.com/images/Orbit/bcline-hover-right.png);
background-position: -111px, 111px;
background-repeat: no-repeat;
cursor: pointer;
}

Answer 1

[您要实现的目标需要大量的::before和:after及其他伪类，对于此类情况最好使用摘要，因为这会涉及大量时间。

这里是引导箭头的面包屑的jsfiddle example。

只需检查元素，然后在示例中进行相同的样式/标记，或者更改我的样式/标记以使其适合您的样式。