Twitter Bootstrap Question posted in

bootstrap btn hover not working – Twitter bootstrap

I’m pulling my hair out to try and find out why my hover background-color isn’t working for my custom buttons. I’m using twitter Bootstrap v3.

Here is the css code:

.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;}

Here is the 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>

I’ve tried adding ‘.btn’ to the css code, and that hasn’t worked.

It’s part of a carousel slider. Could this be the reason?

This is the page in question: index_test.html

What am I missing?

Thank you!

Tags:

3

Answers


  1. 0

    Your problem is here. There is a negative z-index property on the carousel items. In full-slider.css line 124.

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

    Changing it to 0 or more will fix. What’s happening is it’s behind the element that you’re actually hovering.. You can check out this link for more on z-index and different behaviours. https://stackoverflow.com/a/35330122/2971290

    Login or Signup to reply.
  2. 0

    Remove the z-index in /css/full-slider.css line 124.
    It will be fine then.

    Login or Signup to reply.
  3. 0

    I had the same problem that my btn:hover didn’t work.
    I changed Bootstrap link (after that worked)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search