JQuery Howto: наведите указатель мыши на ссылку div fadeIn, уберите мышь со ссылки ИЛИ div, div fadeOut

хорошо, пожалуйста, рассмотрите следующий сценарий.

I have 2 links , both are in

  • tags contained in a tag.

    в основном, наведение курсора на ссылку A вызовет анимацию поля, под которым исчезает изображение, а при выходе из ссылки A и выходе из окна — поле исчезает.

    то же самое со ссылкой B, она запускает анимацию другого окна.

    Есть некоторые условия php, которые происходят между ссылками и полем.

    <ul class="links">
<li class="linkA"><a><span>Hover here to see BOX A</span></a></li>
<li class="linkB"><a><span>Hover me to see BOX B</span></a></li>
</ul>


<?php if ( is_user_logged_in() ) { ?>
<div id="boxA">
Some content here for Box A
</div>
<?;}

else { ?>
<div id="boxB" >
Content for Box B
</div>
<?php }
?> 

<style>
ul,
li {list-type:none; display:inline}
li.linkA a {display:block; width:20px; height:20px; background:url(my_image_A.png) no-repeat;}
li .linkB a {display:block; width:20px; height:20px; background:url(my_image_B.png) no-repeat;}

boxA,
boxB {width:300px;height:180px;border:4px solid #00aaff;background:yellow; display: none;}
<script>

jQuery(".linkA").hover(function() {
jQuery("#boxA").fadeIn('fast').css('display', 'block');
 }, function() {
jQuery("#boxA").fadeOut('fast')
});
</script>

    Это просто не работает должным образом. Коробки исчезают, как только мышь покидает ссылку. Я хотел бы, чтобы поле оставалось видимым до тех пор, пока мышь не покинет ссылку и/или поле...


    • jquery show-hide hover mouseenter mouseleave
    person mlclm    schedule 08.06.2012    source источник

    Ответы (2)


    arrow_upward
    1
    arrow_downward

    Используйте следующий jQuery:

    $(".linkA").mouseover(function() {
    $("#boxA").fadeIn('fast');
}).mouseout(function () {
    $("#boxA").fadeOut('fast');
});​

$(".linkB").mouseover(function() {
    $("#boxB").fadeIn('fast');
}).mouseout(function () {
    $("#boxB").fadeOut('fast');
});​

    См. этот живой пример

    person jacktheripper    schedule 08.06.2012
    comment
    Я думаю, вам не нужно несколько ховеров для каждой ссылки - person The System Restart; 08.06.2012
    comment
    нет, все так же, как было, когда я пытался. Проблема в том, что окно исчезает, когда в него входит мышь. Мне нужно, чтобы поле оставалось видимым до тех пор, пока мышь не покинет ссылку И/ИЛИ поле, как на этом сайте, в самом верхнем разделе ссылок, вы можете навести на него курсор, и маленькая форма появится до тех пор, пока мышь не покинет ссылку или форму: www.conforama .фр – - person mlclm; 10.06.2012

    arrow_upward
    0
    arrow_downward 

    $(".linkA").on('hover', function(e) {
    if(e.type == 'mouseenter') {
      $("#boxA").fadeIn('fast');
    } else {
      $("#boxA").fadeOut('fast');
    }
});​

    делать с одним наведением, не нужно писать отдельный оператор наведения для каждой ссылки.

    Если ваша ссылка имеет только один класс, ее можно использовать, как показано ниже.

    $(".linkA, .linkB").on('hover', function(e) {
    if(e.type == 'mouseenter') {
      $("#box" + this.className.replace('link','')).fadeIn('fast');
    } else {
      $("#box" + this.className.replace('link', '')).fadeOut('fast');
    }
});​

    ДЕМО

    Примечание

    Вам не нужно display: block, потому что jQuery использовал это, когда он .fadeIn().

    person thecodeparadox    schedule 08.06.2012
    comment
    нет, все так же, как было, когда я пытался. Проблема в том, что окно исчезает, когда в него входит мышь. Мне нужно, чтобы поле оставалось видимым до тех пор, пока мышь не покинет ссылку И/ИЛИ поле, как на этом сайте, в самом верхнем разделе ссылок, вы можете навести на него курсор, и маленькая форма появится до тех пор, пока мышь не покинет ссылку или форму: www.conforama .fr - person mlclm; 10.06.2012