Bootstrap btn悬停不工作

4nkexdtk 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(101)

我拔出我的头发，试图找出为什么我的悬停背景色不工作，我的自定义按钮。我用twitter Bootstrap 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>

我试过在css代码中添加.“btn”，但没有成功。
这是旋转木马的一部分。这会是原因吗？
这是您访问的页面：index_test.html
我错过了什么？
谢谢你，谢谢你

twitter-bootstrap

来源：https://stackoverflow.com/questions/38406486/bootstrap-btn-hover-not-working

3条答案

按热度按时间

yeotifhr1#

你的问题就在这里。在full-slider.css的第124行，轮播项目上有一个负的z-index属性。

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

将其更改为0或更大值即可修复。实际情况是它在您实际悬停的元素后面。您可以查看此链接以了解更多关于z轴和不同行为的信息。https://stackoverflow.com/a/35330122/2971290

赞(0）回复(0）举报 2022-12-07

qyzbxkaa2#

删除/css/full-slider. css第124行中的z索引。这样就可以了。

赞(0）回复(0）举报 2022-12-07

pes8fvy93#

我有同样的问题，我的btn：hover不工作.我改变了Bootstrap链接（之后工作）

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap btn悬停不工作

3条答案

相关问题

热门标签

最新问答