Jquery: показать/скрыть div при наведении. Показать по клику

Предположим, у меня есть div с классом .description.

Я хотел бы, чтобы div.description отображалось, когда пользователь наводит курсор на другой div с классом .image.

Однако, когда пользователь нажимает div.image, я бы хотел, чтобы div.description оставался видимым. Поэтому, если пользователь нажимает на .image, событие mouseleave не должно применяться.

Наконец, когда пользователь снова нажимает на .image, функция наведения должна снова активироваться. Так что, когда мышь покинет .image1, div.description снова будет скрыто.

Надеюсь, вы, ребята, можете мне помочь!


jquery show mouseover jquery-hover mouseleave
person NvdB31    schedule 27.04.2014    source источник
comment
что надоело, покажи свой код   -  person Ehsan Sajjad    schedule 27.04.2014
comment
Что было бы проще, чем «говорить» все это, так это увидеть настоящий HTML.   -  person David says reinstate Monica    schedule 27.04.2014

Ответы (4)


arrow_upward
1
arrow_downward

Вы можете попробовать что-то вроде этого: http://jqversion.com/#!/CCvqpwh

$('.image').bind('mouseenter', function(){
    $('.description').show();
}).bind('mouseleave', function(){
    $('.description').hide();
}).click(function(){
  if (!$(this).hasClass('clicked')){
    $(this).addClass('clicked');
    $(this).unbind('mouseleave');
  } else {
    $(this).removeClass('clicked');
    $(this).bind('mouseleave', function(){
        $('.description').hide();
    })
  }
});
person Mihai Matei    schedule 27.04.2014

arrow_upward
0
arrow_downward

Вы можете привязать два события к одним и тем же элементам, как показано ниже. И использовать отдельную функцию, чтобы получить то, что вы хотите.

var myFunction1 = function() {
   $('div.description').show();
}
var myFunction2 = function() {
  // do whatever you want
}
$('div.image')
    .click(myFunction1)
    .mouseover(myFunction2)
person underscore    schedule 27.04.2014

arrow_upward
0
arrow_downward

Используйте этот скрипт

   jQuery(document).ready(function() {
        jQuery('.overlay').hide();
    });
    jQuery(document).ready(function() {
        jQuery('.element, .element-1').hover(function() {
            jQuery('.overlay').show();
            },
        function() {
            jQuery('.overlay').hide();
            });
    });
person Manish Negi    schedule 06.01.2016

arrow_upward

arrow_downward

person    schedule
comment
У устройств с сенсорным экраном нет функции наведения, поэтому вы можете вызвать **$(div.description).show() внутри вашей функции щелчка, если отмена имеет значение true. - person Adam; 09.02.2016