jQuery - Невозможно нажать на элемент в DOM Из-за поля

У меня возникли проблемы с получением jQuery, чтобы щелкнуть изображения в нижнем колонтитуле из-за стиля margin: -107px 0 0 0;, применяемого к нижнему колонтитулу. Я не понимаю, почему это вызывает проблему, поскольку я все еще вижу изображения в DOM при проверке веб-сайта. Я также заметил, что у меня возникают проблемы с подсветкой слов «Жареный цыпленок Песто-сандвич» в нижнем колонтитуле, и я считаю, что это также связано с тем, что стиль margin: -107px 0 0 0; применяется к нижнему колонтитулу.jQuery - Невозможно нажать на элемент в DOM Из-за поля

Link to website

//jQuery 
$("footer #thumbs ul li figure img").click(function() { 
    var id = $(this).attr('id'); 
    $.backstretch(images[id]); 
    $('html').css('background-size', 'cover');  
}); 

//css 
footer { 
    margin: -107px 0 0 0; //The -107px is causing the problem 
    width: 100%; 
    height: 107px; 
    background: url(../img/bottom.png) repeat-x; 
} 

//html 
<footer> 
    <div id="thumbsDesc">Grilled Chicken Pesto Sandwich</div> 
    <div id="thumbs"> 
    <ul> 
     <li><figure><img id="0" src="img/01.jpg"></figure></li> 
     <li><figure><img id="1" src="img/02.jpg"></figure></li> 
     <li><figure><img id="2" src="img/03.jpg"></figure></li> 
     <li><figure><img id="3" src="img/04.jpg"></figure></li> 
    </ul> 
    </div> 
</footer>

источник

2012-05-08 Jon

в качестве примечания, что делает ваш пользователь скачать 2.5MB изображений приводит к очень низкой производительности нагрузки. Сократите эти изображения вниз (один - 2486 * 2242). –

@TravisJ Спасибо за напоминание. Я тестировал на своем локальном, так что размер не повлиял на меня :) – Jon

Вам нужно уменьшить z-индекс класса оболочки, я попробовал это на firebug, и я смог выбрать текст и щелкнуть изображения. Нет необходимости увеличивать индекс z z Я использовал -10 для обертки

Редактировать: также, если вы удаляете позицию относительно обертки, она работает так, что вы можете делать все, что, по вашему мнению, лучше всего подходит для всех браузеров, Я только играл с этим на FF

источник

2012-05-08 19:01:36 Huangism

Спасибо. Я проверил это, и это сработало :) – Jon

Похоже div class="wrapper" оверлеи колонтитула. (попробуйте изменить z-index нижнего колонтитула.) - не работает, извините. Попробуйте установить нижний колонтитул внутри обертки.

источник

2012-05-08 18:55:52 Popcorn

Это определенно проблема, однако решение не совсем работает. Вам нужно будет сделать больше, чем просто. –

Каким образом 'wrapper' накладывает« нижний колонтитул », когда я могу визуально видеть нижний колонтитул поверх оболочки? Трэвис прав - я изменил индекс z, но он все еще не работает. – Jon

Мне нужно, чтобы нижний колонтитул находился за пределами «обертки», чтобы нижний колонтитул склеился в нижней части экрана. – Jon

для DIV отмечен id="thumbs" установить его в CSS

position: absolute; 
z-index: 1; 
left: 120px;

источник

2012-05-08 19:03:13

jQuery - Невозможно нажать на элемент в DOM Из-за поля

ответ

Смежные вопросы