jQuery Hover мерцает для заголовка изображения - PullRequest
Новая
       15

jQuery Hover мерцает для заголовка изображения

0 голосов
/ 14 января 2010

У меня есть несколько вращающихся изображений со скрытыми надписями, которые я хотел бы показать с помощью jQuery, когда кто-то наводит курсор мыши. Каждое изображение + подпись выглядит так: 

<img src="images/picture.jpg" id="feature-1-image" />
<p id="feature-1-caption" class="feature_caption">1: Here is the caption</p>

Для заголовка установлено отображение: нет; и помещается сверху изображения с верхом: -75px. JQuery для взаимодействия таков: 

$("img[id*=feature-]").hover(function(){
    var feature_id = $(this).attr("id").split("-");
    $('p[id=feature-' + feature_id[1] + '-caption]').addClass("showCaption");
    },
    function(){
    var feature_id = $(this).attr("id").split("-");
    $('p[id=feature-' + feature_id[1] + '-caption]').removeClass("showCaption");
});

Работает нормально, за исключением того, что при наведении курсора на сам заголовок он мерцает, потому что в игру вступает эффект наведения на изображение (т. Е. Заголовок находится сверху изображения, поэтому он срабатывает как при наведении, так и при наведении , таким образом, мерцает).

Я перепробовал кучу вещей, но не работал. Любые идеи о том, как остановить событие зависания, если я нахожусь в тексте подписи? Спасибо.

Ответы [ 2 ]

0 голосов
/ 14 января 2010

Спасибо, Returnvoid. Ваше предложение больше / меньше того, что я в итоге сделал - мне нужно было поработать над div выше - дох. Поскольку я вращал некоторые изображения, мне нужно было прикрепить и отсоединить класс, указывающий, с каким изображением имело дело. Вот мой код, на случай, если он пригодится кому-либо еще. 

// Handle click of featured items in sidebar

$("li[id*=feature-]").click(function(event) {
    // determine the feature_id
    var feature_id = $(this).attr("id").split("-");

    // remove the class indicating what feature is selected
    $("#imagespot").removeClass();
    // add class indicating the current feature
    $("#imagespot").addClass("feature-" + feature_id[1]);
    // hide all feature images
    $("img[id*=feature-]").hide();
    // remove the active class from all list items, and attach to current one
    $("li[id*=feature-]").removeClass("active");
    $(this).addClass("active");
    // show the selected image
    $('img[id=feature-' + feature_id[1] + '-image]').animate({opacity:"show"}, "medium");

});

// Handle display of captions

$("#imagespot").hover(function(){
    // determine the feature_id
    var feature_id = $(this).attr("class").split("-");
    // make the appropriate caption appear on mouseover
    $('p[id=feature-' + feature_id[1] + '-caption]').animate({opacity:"show"}, "fast");

    },
    function(){
    // determine the feature_id
    var feature_id = $(this).attr("class").split("-");
    // make the appropriate caption disappear on mouseout
    $('p[id=feature-' + feature_id[1] + '-caption]').animate({opacity:"hide"}, "slow");

});
0 голосов
/ 14 января 2010

Может быть, эти решения могут быть использованы: 

$(document).ready(function(){
            $(".img-caption").hover(
                function(){
                    $(this).find('p').show();
                },          
                function(){
                    $(this).find('p').hide();
                }
            );

        });

HTML выглядит так: 

<div class="img-caption">
<img src="http://www.bertellibici.com/products/112/images/bb_DSC_6763.jpg" id="feature-1-image" />
<p id="feature-1-caption" class="feature_caption">1: Here is the caption</p>
</div>

и css: 

.img-caption{float: left;position:relative}
.feature_caption{display: none;position: absolute;top: 0px;left: 0px}
...