Jquery наведите курсор на изображение

Question

Jquery наведите курсор на изображение

0

Я пытаюсь сделать функциональность, когда пользователь наводится на изображение, а затем появляется элемент привязки. Затем пользователь может щелкнуть тег привязки, чтобы перейти по ссылке. Когда пользователь не наводил изображение, он исчезает.

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

Здесь мой метод ниже: http://jsfiddle.net/5z4RL/

HTML//У меня есть div с неупорядоченным списком. Каждый li имеет img и привязку

    <div id="img_container">

         <ul>
            <li>
                <img src="img/first.jpg" width="260px" height="260px">
                <a href="#">Click Here To Visit </a>
            </li>
            <li>
                   <img src="img/second.jpg" width="260px" height="260px">
                <a href="#"> Click Here To Visit </a>
            </li>
            <li>
                <img src="img/third.jpg" width="260px" height="260px">
                <a href="#"> Click Here To Visit </a>
            </li>
        </ul>

    </div>

Jquery

 $(document).ready(function(){ 
    $("#img_container img").hover(
      function(){
        $(this).next().css("visibility","visible");
       }, function(){
        $(this).next().css("visibility","hidden");
       }

    );

});// end of ready

user3029001 27 май 2014, в 23:27

Источник

1

Почему бы не навести курсор на элементы списка ...
War10ck 27 май 2014, в 20:46

Теги:

jquery

html

css

hover

5 ответов

2

Вместо этого вы можете использовать LI:

$("#img_container li").hover(
    function(){
        $(this).find('a').css("visibility","visible");
    }, function(){
        $(this).find('a').css("visibility","hidden");
    }      
);

Razor 27 май 2014, в 18:30

1

Вы можете присоединить обработчик hover на <li>, как уже сказано, или, альтернативно, прикрепить его как к <img> и к <a>.

Это может быть полезно, если вы не хотите полагаться на границы элемента <li>.

Здесь скрипка: http://jsfiddle.net/5z4RL/3/

$(document).ready(function(){ 
    $("#img_container img, #img_container a").hover(
        function(){
            $(this).parent().find("a").css("visibility","visible");
        }, function(){
            $(this).parent().find("a").css("visibility","hidden");
        }

    );

});// end of ready

Telmo Marques 27 май 2014, в 19:29

1

Привяжите к элементам списка вместо изображения. Затем затухайте тег привязки и выведите соответственно:

$(function(){ 
    $("#img_container li").hover(function () {
        $(this).find('a').fadeIn();
    }, function () {
        $(this).find('a').fadeOut();
    });
});

War10ck 27 май 2014, в 19:19

-2

Назначьте событие в свой LI вместо , и используйте .mouseenter() и .mouseleave вместо hover(). Таким образом, пока ваш курсор находится на элементе или любом из его дочерних элементов, событие все еще активно.

Steve 27 май 2014, в 18:38

2

hover - сокращение от mouseenter/mouseleave
Razor 27 май 2014, в 20:50
0

Ах, ты прав. Ключевым моментом здесь является элемент, с которым связано событие, как уже упоминали другие.
Steve 27 май 2014, в 20:51

Ещё вопросы

Почему бы не навести курсор на элементы списка ...
Ах, ты прав. Ключевым моментом здесь является элемент, с которым связано событие, как уже упоминали другие.

Joe · Accepted Answer · 2014-05-27T18-04-00.000Z

Просто используйте CSS для чего-то простого:

#img_container li a {
    /* current styles */
    visibility: hidden;
}
#img_container li:hover a {
    visibility: visible;
}

Это скрывает элементы по умолчанию затем показывает их при наведении мыши на родительском a li.

Здесь он работает: http://jsfiddle.net/sPL73/

Если вы хотите, чтобы a был видимым, если вместо этого наведите курсор мыши на изображение, используйте:

#img_container li a {
    /* current styles */
    visibility: hidden;
}
#img_container img:hover + a, #img_container li a:hover {
    visibility: visible;
}

При этом используется CSS3 селектор смежно родственный, чтобы выбрать рядом с изображением, которое будучи завис над. a Вот демо: http://jsfiddle.net/4wcQr/

Много отличных разнообразных ответов. Я многому учусь у них. Спасибо за время ваших парней!