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懸停不起作用

回答

相關問題