ブートストラップbtnのホバーが動作しない

Question

私の髪を引っ張って、ホバーの背景色が私のカスタムボタンのために働いていない理由を見つけようとしています。私は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

私は何をしないのですか？

ありがとうございました！

Answer 1

ここに問題があります。カルーセル項目には負のz-インデックス特性があります。 full-slider.css 124行目。

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

0以上に変更すると修正されます。実際にホバリングしている要素の背後には何が起きているのですか？このリンクでは、Zインデックスやさまざまな動作について詳しく調べることができます。 https://stackoverflow.com/a/35330122/2971290

Answer 2

/css/full-slider.css行のz-indexを削除してください。 これで問題ありません。