如果光標在目標可見之前移動，則不會觸發mouseleave

Question

我有一個比薩餅菜單，當用戶將光標懸停在其中一個餅上時，它會在其頂部顯示有關該餅的信息。我迄今爲止的工作，但有一個怪癖。

如果您通過.infotrigger快速移動鼠標，.iteminfo對於mouseleave不可見，因此會導致.iteminfo可見，這是不可取的。你可以玩here。

JQUERY：

$(function() { 

     $('.infotrigger').mouseenter(function() { 
      $(this).children('.iteminfo').show(100); 
     }); 

     $('.iteminfo').mouseleave(function() { 
      $(this).fadeOut(200); 
     }); 

    }); 

我搜索了幾個星期的解決方案，並已經接近，但它似乎總是回來我感到有必要爲「本」觸發的方式獲得。我使用了兒童處理程序，因爲我爲菜單上的每個項目使用了相同的類。沒有它，菜單上的每個披薩的信息都會彈出。我首先嚐試了一個列表，但似乎無法使其工作。如果有更好的方法來解決這個問題，我就是所有人的眼睛。我想知道我構建HTML的方式是否是我想要實現的最大障礙。

HTML：

<div class="menuitem"> 
    <div class="infotrigger"> 
     <div class="iteminfo"></div> 
    </div> 
</div> 

CSS：

.menuitem { 
width:144px; 
height:200px; 
float:left; 
position:relative; 
display:block; 
font-size:1.2em; 
letter-spacing:.05em; 
margin-left:2em; 
z-index:5; 
} 

.menuitem p { 
margin-bottom:0; 
} 

.menuitem img { 
} 

.infotrigger { 
margin-bottom:-14px; 
height:120px; 
overflow:visible; 
} 

.iteminfo { 
position:relative; 
display:none; 

width:238px; 
/*height:168px;*/ 
margin:-140px auto 0 -47px; 
text-align:left; 
font-size:0.8em; 
font-family:Helvetica, Arial, sans-serif; 
font-weight:bold; 
letter-spacing:0; 
color:rgb(110,48,21); 
border-right:1px solid rgba(0,0,0,0.2); 
border-bottom:1px solid rgba(0,0,0,0.25); 
-moz-border-radius:4px; 
border-radius:4px; 
-moz-box-shadow:1px 1px 10px rgba(0,0,0,0.5); 
-webkit-box-shadow:1px 1px 10px rgba(0,0,0,0.5); 
box-shadow:1px 1px 32px rgba(0,0,0,0.5); 
background-image: linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%); 
background-image: -o-linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%); 
background-image: -moz-linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%); 
background-image: -webkit-linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%); 
background-image: -ms-linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%); 
background-image: -webkit-gradient(
linear, 
left bottom, 
left top, 
color-stop(0, rgb(224,201,174)), 
color-stop(1, rgb(254,245,224)) 
); 
z-index:100; 
} 

.iteminfo img { 
margin:0 0; 
width:238px; 
height:56px; 
} 

.iteminfo p { 
text-align:left; 
margin:0.7em 0.2em 0.5em 0.5em; 
} 

.fb-like { 
margin:0.5em auto 0.5em 0.5em; 
} 

感謝您幫助。這正是嘗試Web開發的設計師的樣子。

Answer 1

不知道會做很多工作，但嘗試加入一些止損，如果沒有創建備份計劃：

$('.infotrigger').mouseenter(function() { 
    $(this).children('.iteminfo').stop(true, true).show(100); 
}); 

$('.iteminfo').mouseleave(function() { 
    $(this).stop(true, true).fadeOut(200); 
}); 

備份計劃，不是一個好主意，但嘗試更多的局部範圍改變的東西：

$(document).on('mousemove', function(e) { 
    if ($(".iteminfo").is(':visible') && e.target.className != 'iteminfo') { 
     $(".iteminfo").hide(); //could use a timeout aswell 
    } 
}); 

也許是最好的解決辦法是隻做：

$('.infotrigger').mouseenter(function() { 
    var elm = $(this).children('.iteminfo'); 
    $('.iteminfo').not(elm).fadeOut(200); 
    elm.show(100); 
}); 

$('.iteminfo').mouseleave(function() { 
    $(this).fadeOut(200); 
}); 

Answer 2

大約只需綁定0如何事件到infotrigger？

$('.infotrigger').hover(function() { 
    $(this).children('.iteminfo').show(100); 
}, function() { 
    $(this).children('.iteminfo').fadeOut(200); 
});​ 

我試了一下，工作正常;）

Answer 3

CSS
爲什麼不純CSS？ 。http://jsfiddle.net/mqchen/QFJz7/

它只是顯示信息上懸停，並支持CSS3動畫的信息將在淡出瀏覽器

的Javascript
這裏是一個老派的JavaScript的解決方案是稍微詳細：http://jsfiddle.net/mqchen/Sbg7g/3/

它基本上隱藏所有其他人，不管哪個「比薩」鼠標離開。看看jsfiddle。你只需要考慮JavaScript的部分。

var triggers = $(".infotrigger"); 
var infos = $(".infotrigger .iteminfo"); 

$(triggers).each(function(index, trigger) { 
    $(trigger).mouseenter(function(e) { 
     $(infos).each(function(i2, info) { 
      if(index === i2) { 
       $(info).fadeIn(100); 
      } 
     }); 
    }); 

    $(trigger).mouseleave(function(e) { 
     $(infos).each(function(i2, info) { 
      $(info).fadeOut(200); 
     }); 
    }); 
});