【发布时间】：2018-06-13 10:16:51
【问题描述】：
我正在使用引导箭头面包屑。下面的图片会比我解释得更好：
带有正常/悬停/活动元素的面包屑：
面包屑问题，当活动元素和悬停元素更接近时箭头隐藏：
我想每次都保留箭头，我尝试了 z-index 但它不起作用：/
希望你能理解，谢谢帮助。
$(document).ready(function() {
$( ".btn-breadcrumb a" ).click(function() {
$(".btn-breadcrumb a").removeClass("active");
$(this).addClass("active");
});
}); .btn-breadcrumb a{
font-weight: bold;
}
.btn-breadcrumb a:hover {
z-index: 1;
}
.btn-breadcrumb a.active {
background-color: #95A5A6;
color: #fff;
}
#breadcrumb_sauvegarde {
background-color: #d9534f;
color: #fff;
}
#breadcrumb_widget .btn-group{
display: flex;
}
#breadcrumb_widget .btn-breadcrumb .btn {
flex-grow: 1;
text-align: center;
position: relative;
}
/** Triangle Breadcrumb **/
.btn-breadcrumb .btn:not(:last-child):after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 22.4px solid transparent;
border-bottom: 22.4px solid transparent;
position: absolute;
top: 50%;
margin-top: -22.4px;
left: 100%;
z-index: 999;
}
/** Triangle Breadcrumb **/
.btn-breadcrumb .btn:not(:last-child):before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 22.4px solid transparent;
border-bottom: 22.4px solid transparent;
position: absolute;
top: 50%;
margin-left: 1px;
margin-top: -22.4px;
left: 100%;
z-index: 999;
}
/**Spacing **/
.btn-breadcrumb .btn {
padding:12px 24px 12px 48px;
}
.btn-breadcrumb .btn:first-child {
padding:12px 12px 12px 20px;
}
.btn-breadcrumb .btn:last-child {
padding:12px 36px 12px 48px;
}
/** /////////////////////////// bouton triangle pour faire apparaitre le breadcrumb en flèche //////////////////////// **/
/*couleur de fond du triangle*/
.btn-breadcrumb .btn.btn-default:not(:last-child):after {
border-left: 40px solid #fff;
}
/*couleur de fond du triangle hover*/
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
border-left: 40px solid #ecf0f1;
}
/*couleur de fond du triangle active*/
.btn-breadcrumb .btn.btn-default.active:not(:last-child):after {
border-left: 40px solid #95A5A6;
}
/*couleur de fond du triangle sur active hover*/
.btn-breadcrumb .btn.btn-default.active:hover:not(:last-child):after {
border-left: 40px solid #95A5A6;
}
/*couleur des bordures du triangle*/
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
border-left: 40px solid #5e595d;
}
/*couleur des bordures du triangle sur hover*/
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
border-left: 40px solid #5e595d;
} <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="breadcrumb_widget">
<div class="panel panel-default">
<div class="btn-group btn-breadcrumb ">
<a href="#" id="breadcrumb_configuration" class="btn btn-default active">1. Configuration</a>
<a href="#" id="breadcrumb_formulaire" class="btn btn-default">2. Formulaire</a>
<a href="#" id="breadcrumb_preview" class="btn btn-default">3. Preview</a>
<a href="#" id="breadcrumb_sauvegarde" class="btn btn-default">4. Sauvegarder</a>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
-
看起来像一个 z-index 问题...也许尝试不使用 999 它是不必要的大。我很少使用超过 2 个
-
您好，z-index 较低也是一样。
-
悬停时尝试
z-index:auto -
嗨，自动没有变化^^。 Zuber 似乎有一个很好的答案。
标签： css twitter-bootstrap-3 breadcrumbs