引导 BTN 悬停不起作用

Question

我正在拔头发，试图找出为什么我的悬停背景色不适用于我的自定义按钮。我正在使用推特引导程序v3。

这是 css 代码：

.btn-slide1 {
padding: 20px 40px;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;
background-color:#5cb85c;
border-color:#4cae4c;
}
 .btn-slide1:hover,.btn-slide1:focus,.btn-slide1:active {background-color: #9966cc !important;}

这是 html：

  <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('images/slide1.jpg');"></div>
            <div class="carousel-caption">
                <h2>Turn your art into a masterpiece</h2><br>
                <a class="btn btn-slide1" href="#">Learn More</a>
            </div>
        </div>

我尝试将".btn"添加到 css 代码中，但这没有奏效。

它是轮播滑块的一部分。这可能是原因吗？

这是有问题的页面：index_test.html

我错过了什么？

谢谢！

Answer 1

你的问题就在这里。轮播项目上存在负 z 索引属性。在全滑块中.css第 124 行。

.carousel, .item, .active {
    height: 100%;
    z-index: -10 !important;
}

将其更改为 0 或更大将修复。正在发生的事情是它位于您实际悬停的元素后面。您可以查看此链接以获取有关 z-index 和不同行为的更多信息。https://stackoverflow.com/a/35330122/2971290

Answer 2

删除/css/full-slider.css第 124 行中的 z 索引。那就没事了。

Answer 3

我遇到了同样的问题，我的btn：hover不起作用。我更改了引导链接（之后有效）