如何使用CSS将元素置于悬停状态上方？

Question

如何使用CSS将元素置于悬停状态上方？

csstwitter-bootstrap-3breadcrumbs

3

我正在使用Bootstrap箭头面包屑导航。以下图片能更好地解释：

正常/悬停/活动状态下的面包屑元素：

面包屑问题，当活动状态和悬停元素接近时箭头会隐藏： Breadcrumb issue

我想始终保留箭头，但是我尝试了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>

- vincent

看起来像是一个 z-index 的问题... 也许尝试不要使用999，它太大了。我很少需要使用超过2。 - Paulie_D

嗨，使用更低的z-index是相同的事情。 - vincent

在悬停时尝试使用 z-index:auto - Paulie_D

嗨，自动没有变化^^。Zuber似乎有一个很好的答案。 - vincent

4个回答

1

问题在于你自己的样式被Bootstrap覆盖了。

只需添加`！important`

.btn-breadcrumb a {
  font-weight: bold;
}

.btn-breadcrumb a:hover {
  z-index: 1 !important;
}

.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;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<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>

- Rainbow

0

    $(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>

- Ashwani Kumar

-1

你需要为 .btn 设置 z-index，按降序排列。

$(document).ready(function() {
        $( ".btn-breadcrumb a" ).click(function() {
            $(".btn-breadcrumb a").removeClass("active");
            $(this).addClass("active");
        });
    });

    .btn-breadcrumb a.btn {
  font-weight: bold;
  padding: 12px 24px 12px 48px;
}
.btn-breadcrumb a.btn.active {
  background-color: #95a5a6;
  color: #fff;
}
.btn-breadcrumb a.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%;
}
.btn-breadcrumb a.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%;
}
.btn-breadcrumb a.btn:first-child {
  padding: 12px 12px 12px 20px;
}
.btn-breadcrumb a.btn:last-child {
  padding: 12px 36px 12px 48px;
}
.btn-breadcrumb a.btn.btn-default:not(:last-child):after {
  border-left: 40px solid #fff;
}
.btn-breadcrumb a.btn.btn-default:hover:not(:last-child):after {
  border-left: 40px solid #e6e6e6;
}
.btn-breadcrumb a.btn.btn-default.active:not(:last-child):after, .btn-breadcrumb a.btn.btn-default.active:hover:not(:last-child):after {
  border-left: 40px solid #95a5a6;
}
.btn-breadcrumb a.btn.btn-default:not(:last-child):before, .btn-breadcrumb a.btn.btn-default:hover:not(:last-child):before {
  border-left: 40px solid #5e595d;
}
.btn-breadcrumb a:nth-child(n + 1) {
  z-index: 4;
}
.btn-breadcrumb a:nth-child(n + 1):after, .btn-breadcrumb a:nth-child(n + 1):before {
  z-index: 998;
}
.btn-breadcrumb a:nth-child(n + 1).active {
  z-index: 4;
}
.btn-breadcrumb a:nth-child(n + 1):hover {
  z-index: 4;
}
.btn-breadcrumb a:nth-child(n + 2) {
  z-index: 3;
}
.btn-breadcrumb a:nth-child(n + 2):after, .btn-breadcrumb a:nth-child(n + 2):before {
  z-index: 997;
}
.btn-breadcrumb a:nth-child(n + 2).active {
  z-index: 3;
}
.btn-breadcrumb a:nth-child(n + 2):hover {
  z-index: 3;
}
.btn-breadcrumb a:nth-child(n + 3) {
  z-index: 2;
}
.btn-breadcrumb a:nth-child(n + 3):after, .btn-breadcrumb a:nth-child(n + 3):before {
  z-index: 996;
}
.btn-breadcrumb a:nth-child(n + 3).active {
  z-index: 2;
}
.btn-breadcrumb a:nth-child(n + 3):hover {
  z-index: 2;
}
.btn-breadcrumb a:nth-child(n + 4) {
  z-index: 1;
}
.btn-breadcrumb a:nth-child(n + 4):after, .btn-breadcrumb a:nth-child(n + 4):before {
  z-index: 995;
}
.btn-breadcrumb a:nth-child(n + 4).active {
  z-index: 1;
}
.btn-breadcrumb a:nth-child(n + 4):hover {
  z-index: 1;
}
.btn-breadcrumb a:nth-child(n + 5) {
  z-index: 0;
}
.btn-breadcrumb a:nth-child(n + 5):after, .btn-breadcrumb a:nth-child(n + 5):before {
  z-index: 994;
}
.btn-breadcrumb a:nth-child(n + 5).active {
  z-index: 0;
}
.btn-breadcrumb a:nth-child(n + 5):hover {
  z-index: 0;
}
#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;
}

<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>

- Ashwani Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zuber · Accepted Answer

您需要为active按钮设置z-index。请查看css底部的添加的CSS
将.btn设置为z-index: unset;。请查看更新的css

$(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;
    z-index: unset; /* Update */
}

/** 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;
}
/*** Added CSS ***/
.btn-breadcrumb .btn.btn-default.active {
  z-index: 3;
}

<!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>