CSS button not working in Google Chrome?

问题

I'm working on a home page for a film company's website, and it has a CSS button with a hover effect that is going to open a lightbox once it's ready, at the moment I just have it set to href="#" as a placeholder until I'm ready to implement the lightbox. There is also a small image of a downward pointing arrow, with the link set to an anchor that isn't on the page yet. Both of these work in Firefox, but in Chrome the hover effect doesn't work on the button, and it behaves as if neither of these elements have anchor tags around them. I poked around with Chrome's dev tools and it seems as though the span around the button may be the culprit as Chrome seems to be resizing it, but I can't figure out any reason why the image link isn't working, and I'm not entirely sure why Chrome is disagreeing with the span.

The strange part is that there are three other CSS buttons with hover effects in a seperate div, and they all work just fine.

The website is currently uploaded at http://www.gruntwork.us/reelindi/test/ The style sheet can be found at http://www.gruntwork.us/reelindi/test/reelindi.css

CSS:

div.header {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    background-image:url("resources/images/bg.jpg");
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height:430px;
    width:100%;
    z-index: -1;
}
img.arrow {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 58px;
    z-index: 999;
}
span.redBtn a {
    text-align:center;
    display:block;
    margin: 0 auto;
    width: 150px;
    margin-top: -40px;
    z-index: 999;
}
a.redBtn {
    color: #fff;
    background-color: #d94d4d;
    font-size: 1.125em;
    padding: 8px 18px;
    text-decoration: none;
    text-align: center;
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    -ms-transition: all ease 1s;
    transition: all ease 1s;
    border-radius: 5px;
}
a.redBtn:hover {
    background-color: #bf3030;
}

HTML:

<div class="header">
    <h1 class="header">Reel Indi</h1>
    <h2 class="header">"Storytelling in motion."</h2><br>
    <span class="redBtn"><a href="#" class="redBtn">Push the red button!</a></span>
    <a href="#footer"><img class="arrow" src="resources/images/arrow.png"></a>
</div>

I've searched around but can't find an answer for this. Help?

回答1:

Seems like your header's z-index: -1 rule pushes everything "behind" the body content, causing you not to be able to receive mouse events on that layer. Changing it to zero or higher will let you have hover effects and other events just fine.

来源：https://stackoverflow.com/questions/35097786/css-button-not-working-in-google-chrome

标签

css

button

hyperlink