CSS按钮在Google Chrome中不起作用? [英] CSS button not working in Google Chrome?

问题描述

我正在为一家电影公司的网站制作主页，它具有一个具有悬停效果的CSS按钮，一旦准备好，它将打开一个灯箱，目前，我将其设置为href ="#"作为占位符，直到我准备实现灯箱.还有一个向下箭头的小图像，其中链接设置为页面上尚未存在的锚点.两者在Firefox中均有效，但在Chrome中，悬停效果在按钮上不起作用，并且它们的行为就像这两个元素周围都没有定位标记一样.我在浏览Chrome的开发工具时四处张望，似乎按钮周围的跨度可能是罪魁祸首，因为Chrome似乎正在调整其大小，但是我无法弄清楚图像链接无法正常工作的任何原因，我我不能完全确定为什么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.

奇怪的是，另外三个具有悬浮效果的CSS按钮在单独的div中，它们都可以正常工作.

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

该网站当前已上传到 http://www.gruntwork.us/reelindi/test/ 可以在 http://www.gruntwork.us/reelindi/test/中找到样式表reelindi.css

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?

推荐答案

似乎您的header的z-index: -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.

这篇关于CSS按钮在Google Chrome中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！