Липкие подсказки, которые отображаются при нажатии и наведении

Question

Липкие подсказки, которые отображаются при нажатии и наведении

0

Я ищу решение, позволяющее двойное поведение при нажатии и на мыши. Иногда мне нужно отображать div при наведении указателя мыши на изображение, а также на привязку (показывать его до другого события) на странице и скрыть его, если пользователь нажимает на него вне/вне изображения.

Это то, что я до сих пор

HTML Hiya

JS

$(document).ready(function() {

 $("#garden-1").mouseover(function(e) {
    //  Show my popup with slide effect, this can be a simple 
    $("#garden1").show("slow");

  // Bind click event to a link
  $("#garden-1").click(function(e) {
    e.preventDefault();
    //  Show my popup with slide effect, this can be a simple .show() or .fadeToggle()
    $("#garden1").slideToggle("slow");
  });

  // Cancel the mouseup event in the popup
  $("#garden1").mouseup(function() {
    return false
  });
  // Bind mouseup event to all the document
  $(document).mouseup(function(e) {
    // Check if the click is outside the popup
    if($(e.target).parents("#garden1").length==0 && !$(e.target).is("#garden1")) {
      // Hide the popup
      $("#garden1").slideUp("slow");
    }
  });
});

</script>

Однако результат меньше идеи, чем вы можете видеть здесь: http://candelascommunity.businesscatalyst.com/test

Что я делаю не так?

Благодарю!

Yes I am a cat 21 окт. 2013, в 21:09

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

FiLeVeR10 · Accepted Answer · 2013-10-21T16-17-00.000Z

Большая проблема заключается в том, что вы должны просто содержать каждый экземпляр и сделать его более плавным и легким.

Если бы вы хотели изменить свой html, чтобы больше походить.

<div class="box">
    <img src="/img/palm.jpg"/>
    <p>Hiya</p>
</div>

и ваш jquery будет больше похож на

$('.box img').hover(function() {
    $(this).siblings('p').show();
}, function() {
    if (!$(this).siblings('p').hasClass('on')) {
        $(this).siblings('p').hide();
    }
}).on('click', function(){
    $('.on').removeClass('on').hide();
    $(this).siblings('p').addClass('on');
});

то вам просто нужно добавить этот css, и вы должны быть установлены

.box p{display:none}
.box p.on{display:block!important}

Сделал скрипку: http://jsfiddle.net/filever10/NqQFh/

На самом деле, изображение # garden1, а текст (всплывающая подсказка) # garden-1 (плохо переносился на пост). Мне нужно, чтобы они были разными (по идентификатору, а не по классу), потому что отображаются несколько подсказок.
это то, что вы пытаетесь сделать? jsfiddle.net/filever10/NqQFh
да, это очень, очень близко Спасибо! Мне просто нужно, чтобы элемент тоже закрылся, если я щелкну за пределами элемента.
обновил его, чтобы он не зависел от изображений, поэтому вы также можете использовать спрайт изображений для создания фонов для всех них, но изображения все равно будут работать. jsfiddle.net/filever10/NqQFh