Question

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

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

HTML

<div id="bcbox">
<!-- start: nav -->
<ul id="breadcrumb"><li><a href="http://1shotgg.com/index.php" title="Home">Home</a></li>
<!-- start: nav_bit -->
<li><a href="http://1shotgg.com/index.php">1 Shot GG 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://1shotgg.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://1shotgg.com/images/Orbit/bcline-hover-left.png), url(http://1shotgg.com/images/Orbit/bcline-hover-right.png);
background-position: -111px, 111px;
background-repeat: no-repeat;
cursor: pointer;
}

http://jsfiddle.net/J687J/

Answer 1

您要实现的目标需要大量的::before和:after以及其他伪类，最好为这类案例设置片段，因为它涉及时间很长。

这是一个 jsfiddle example 的Bootstrap箭头面包屑。

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

在悬停上箭头的面包屑

1 个答案: