Проверить, находится ли курсор в координатах элемента - jQuery - PullRequest
Новая
       25

Проверить, находится ли курсор в координатах элемента - jQuery

1 голос
/ 27 мая 2011

У меня есть большое изображение, на котором при наведении курсора отображается серия кнопок (например, «Поделиться в Facebook», «Галерея», «Электронная почта» и т. Д.).Кнопки сохраняются как ul и позиционируются абсолютно, когда изображение наведено.Вот разметка для этого: 

<a href="#" title="Click for next image" class="share_buttons"> 
    <img src="" id="largeimage" height="410" width="600" class="share_buttons" /> 
</a> 
<ul id="share_buttons"> 
    <li><a href="#" title="Share on Facebook" class="facebook"><div class="icon"></div>Facebook</a></li> 
    <li><a href="#" title="Link to this Page" class="link"><div class="icon"></div>Link</a></li> 
    <li><a href="#" title="Contact this venue" class="mail"><div class="icon"></div>E-mail</a></li> 
    <li> 
        <a href="#" title="View the venue's Gallery" rel="lightbox" class="gallery"> 
            <div class="icon"></div> 
            Gallery
        </a> 
    </li> 
</ul>

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

var inshared = false;
$('ul#share_buttons li a').mouseover(function() { inshared = true; });
$('ul#share_buttons li a').mouseout(function() { inshared = false; });

// When they hover a share image, fade in the share items:
$('a.share_buttons img').mouseenter(function() {
    var leftpos = ($(this).width() + $(this).offset().left)  - $('ul#share_buttons').outerWidth(true);
    var toppos  = $(this).offset().top + ($('ul#share_buttons').outerHeight(true) * 0.3);
    $('ul#share_buttons').css({ left: leftpos, top: toppos });
        $('ul#share_buttons').fadeIn();
    }).mouseleave(function() {
        $('ul#share_buttons').fadeOut(); 
    });

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

Ответы [ 2 ]

2 голосов
/ 27 мая 2011

Вы можете поместить изображение в div, и div может содержать как ul, так и ваше изображение, и использовать наведенное курсор мыши на div, а не на изображение, чтобы у вас не возникло этой проблемы

2 голосов
/ 27 мая 2011

Я бы создал div с размерами изображения, установил изображение как background-image и поместил бы ul внутри этого ... 

<div style="width: 600px; height: 410px; background-image: url(...); "> 
<ul id="share_buttons"> 
    <li><a href="#" title="Share on Facebook" class="facebook"><div class="icon"></div>Facebook</a></li> 
    <li><a href="#" title="Link to this Page" class="link"><div class="icon"></div>Link</a></li> 
    <li><a href="#" title="Contact this venue" class="mail"><div class="icon"></div>E-mail</a></li> 
    <li> 
        <a href="#" title="View the venue's Gallery" rel="lightbox" class="gallery"> 
            <div class="icon"></div> 
            Gallery
        </a> 
    </li> 
</ul>
</div>
...