Блог

У меня есть большое изображение, на котором при наведении курсора отображается ряд кнопок (таких как «Поделиться на 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 не является потомком элемента image, всякий раз, когда пользователь наводит курсор мыши на кнопки, для изображения запускается mouseout событие, и поэтому кнопки исчезают. Мой вопрос в том, что, если не определять, находится ли положение курсора в пределах координат img элемента, есть ли способ предотвратить это действие?

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

Я бы создал div с размерами изображения, установил изображение в качестве фонового изображения и поместил 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>