bootstrap btn悬停不起作用

我拉我的头发试图找出为什么我的悬停背景颜色不适用于我的自定义按钮。我正在使用twitter Bootstrap v3。bootstrap btn悬停不起作用

这里是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

我缺少什么？

谢谢！

来源

2016-07-16 Rebecca Gallant

通过Chrome的检查元素查看页面，似乎问题确实存在于旋转木马中 - 鼠标没有注册为在元素上徘徊 – Vasseurth

你的问题在这里。转盘项目上有一个负z-index属性。在full-slider.css行124.

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

将其更改为0或更多可以修复。发生了什么是它背后的元素，你实际上徘徊..你可以检查出这个链接更多关于z-index和不同的行为。 https://stackoverflow.com/a/35330122/2971290

来源

2016-07-16 00:18:02 codeaddict

-1

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

来源

2016-07-16 00:19:53

哦，谢天谢地！有效！感谢大家。我相信我不会想到我自己。 –

bootstrap btn悬停不起作用

回答

相关问题