jquery hover не работает в Chrome - PullRequest
Новая
       6

jquery hover не работает в Chrome

0 голосов
/ 23 марта 2012 
        <ul class="top">
            <li>
                <span class="card flipped">
                    <span class="front face">
                        <a href="<?php echo site_url("about") ?>" class="link">
                            <img src="<?php echo base_url();?>img/about.jpg" alt="" />
                            <div class="overlay"><p>ABOUT<br/>US</p></div>
                        </a>
                    </span>
                    <span class="back"></span>
                </span>
            </li></ul>


<script  type="text/javascript">
$(document).ready(function() {
//On mouse over those thumbnail
$('.card').hover(function() {
//Display the caption
$(this).find('.overlay').stop(false,true).fadeIn(400);
},
function() {
    //Hide the caption
    $(this).find('.overlay').stop(false,true).fadeOut(800);
});

});
</script>

iv получил несколько таких карт с некоторыми jquery, чтобы показать работу оверлея во всех протестированных браузерах, кроме crome.сайт на http://gurtyboardingcompany.com.au/, если это помогает.

1 Ответ

0 голосов
/ 23 марта 2012

Это не jQuery, который не работает в Chrome, а ваш стиль CSS.

Ссылка, которая оборачивает изображение и наложение, является абсолютно позицией и отображается над наложением и текстом.

Если вы измените оверлей, чтобы он был полностью позиционирован, то дайте ему более высокий z-индекс, чем у ссылки, он должен работать.

Редактировать

Если вы проверяете DOM с помощью Chrome, вы можете видеть, что значение непрозрачности устанавливается во время fadeIn / fadeOut. Так что я бы исправил проблемы со стилем.

...