Кнопка CSS не работает в Google Chrome?

Question

Я работаю над домашней страницей веб-сайта кинокомпании, и у нее есть кнопка CSS с эффектом наведения, который откроет лайтбокс, когда он будет готов, на данный момент я просто установил его в href = "# «как заполнитель, пока я не буду готов к использованию лайтбокса. Существует также небольшое изображение стрелки направленного вниз, при этом ссылка установлена ​​на якорь, которого еще нет на странице. Обе эти функции работают в Firefox, но в Chrome эффект зависания не работает на кнопке, и он ведет себя так, как будто ни один из этих элементов не имеет вокруг них якорных тегов. Я ткнулся с инструментами разработчика Chrome, и кажется, что диапазон вокруг кнопки может быть виновником, поскольку Chrome, похоже, изменяет его размер, но я не могу понять, почему ссылка на изображение не работает, m не совсем уверен, почему Chrome не согласен с диапазоном.

Странная часть состоит в том, что есть три другие кнопки CSS с эффектами зависания в отдельном div, и все они работают нормально.

Сайт в настоящее время загружены на http://www.gruntwork.us/reelindi/test/ Стилей можно найти на 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> 

Я искал вокруг, но может» t найти ответ для этого. Помогите?

Answer 1

Похоже, что ваш 's z-index: -1 правило выталкивает все «за» содержимое тела, в результате чего вы не сможете получать события мыши на этом слое. Изменение его до нуля или выше позволит вам иметь эффект зависания и другие события просто отлично.