懸停效果不同：左，右，頂部，底部

我想我可能有一個非常困難的問題。我正在做我的投資組合網站，現在我有一個關於我的投資組合項目的懸停效果的問題。 JSFiddle 懸停效果不同：左，右，頂部，底部

<div class="item"> 
    <div class="item-hover"> 

    </div> 
</div>

在撥弄當您懸停懸停DIV來自上面的項目。

現在我的問題是：我希望懸停div從您懸停div的一側出現。
因此，如果您將鼠標懸停在左側，則懸停格將從左側出現。如果您將鼠標懸停在右側，則懸停格將顯示在右側。頂部和底部也是一樣的。

我希望有人能幫我解決我的問題！

映入眼簾，波阿斯Poolman

歡迎來到Stack Overflow！尋求代碼幫助的問題必須包含在問題本身**中重現它所需的最短代碼**。儘管您已經提供了一個示例鏈接，但如果鏈接無效，那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。 –

從本質上講，你需要做的是以下;

要捕獲的方向上的內部元件鼠標，當用戶第一次進入你的元素時，你需要捕捉它的位置。經過很短的時間後，再次捕捉位置。比較這兩個位置，你就可以得到鼠標進入元素的方向。例如;

如果該元素的初始鼠標位置是x: 5和y: 10和新的位置是x: 20和y: 10，可以推斷的是，鼠標在rightward方向移動。

這裏是一個教程，指導你通過你需要知道的;

這裏是演示;

2016-02-26 13:45:22 Lewis

這工作完美！ D非常感謝：D –

回答