顯示隱藏圖像使用jquery鼠標懸停的DIV問題

背景：我有下面的圖片包裝在DIV標籤下。當用戶在圖像上執行mouseover時，會出現overlayInfo DIV標籤（代碼如下）。顯示隱藏圖像使用jquery鼠標懸停的DIV問題

<script type="text/javascript"> 

     $(document).ready(function() 
     { 
      $("#overlayInfo").hide(); 

      $("#ProjectPicture").hover(function(event) { 
       $("#overlayInfo").show(); 
      }); 

      $("#ProjectPicture").mouseleave('mouseleave', function() { 
       $("#overlayInfo").hide(); 
      }); 

     }); 
    </script> 

<div id="ProjectPicture"> 
    <img src="image1.png"> 
</div> 

<div id="overlayInfo"> 
    <i class="fa fa-cloud" title="Web"></i> 
    <i class="fa fa-shopping-cart" title="Shopping Cart"></i> 
</div>

問題：有，我對圖像的鼠標懸停事件看到多個問題。圖像大小爲250 x 200像素。

的overlayInfo標籤間歇性出現在圖像鼠標懸停
當用戶在圖像上移動鼠標，而不是被穩定

的overlayInfo標籤閃爍有什麼，我做錯了。

新增的jsfiddle http://jsfiddle.net/2My79/5/

來源

2014-06-13 Yashman Gupta

嗨，我覺得你使用了錯誤的事件。我估摸使用$ .hover會更好。你可以做一個JSFiddle，我可以爲你轉換它嗎？謝謝 –

@Jit我也試過懸停，但它仍然是相同的 –

請添加一個JSFiddle，以便其他人可以看到是什麼讓你的問題發生 – Kyojimaru

更新：由於我發現解決方案可以消除原始問題，並解決了昨天我通過添加pointer-events: none而花費了的解決方法，因此問題已關閉。現在我不再需要使用它。

爲我工作的解決方案，可以發現@ http://www.backslash.gr/demos/contenthover-jquery-plugin/

@Bhavik感謝小提琴幫助。

爲使閃爍效果在#ProjectPicture的鼠標懸停上消失，我在#overlayInfo的CSS中添加了pointer-events: none;。唯一的缺點是它會停止顯示我在div標籤中的任何工具提示。

完整的來源是@http://jsfiddle.net/yashmangupta/5zBNE/1/。因爲我必須儘快結束這個問題，所以我跟我的解決方案走在前面，但現在還在找工作的專家建議

#overlayInfo 
{ 
    position: absolute; 
    width: 97%; 
    top: 10px; 
    height: 183px; 
    bottom: 0%; 
    border: 0px solid; 
    z-index: 99999; 
    background-color: rgba(255, 255, 255, 0.75); 
    pointer-events: none; 
}

來源

2014-06-13 14:38:21

試試這個：

HTML：

<div id="ProjectPicture"> 
    <img src="image1.png"> 
</div> 

<div id="overlayInfo"> 
    <i class="fa fa-cloud" title="Web"></i> 
    <i class="fa fa-shopping-cart" title="Shopping Cart"></i> 
</div>

的JavaScript：

$(document).ready(function() 
    { 
     $("#overlayInfo").hide(); 

     $("#ProjectPicture").mouseover(function() { 
      $("#overlayInfo").show(); 
     }); 

     $("#ProjectPicture").mouseleave(function() { 
      $("#overlayInfo").hide(); 
     }); 

    });

而對於overlayInfo DIV隨機CSS：

#overlayInfo { display: none; width: 200px; height: 200px; background-color: #000; }

來源

2014-06-13 09:42:40

提供小提琴。這不是對我們的工作 –

我測試過，它的工作，我會提供小提琴 –

下面是一個例子，對我很好：http://jsfiddle.net/K6day/ –

您應該檢查您的元素是否已經可見。嘗試是這樣的：

$("#ProjectPicture").on('mouseenter', function() { 
    $target = $("#overlayInfo"); 
    if($target.is(':visible')) return; 
    $target.show(); 
}).on('mouseleave', function() { 
    $target = $("#overlayInfo"); 
    if(!$target.is(':visible')) return; 
    $target.hide(); 
});

來源

2014-06-13 09:43:22 kosmos

中不能正常工作，該元素已經可見。 –

喲是什麼意思？沒有問題，如果該元素已經可見或沒有。通過檢查，您可以防止顯示已經顯示的內容。與隱藏一樣。所以你也可以防止這些間歇元素。我在jsfiddle上進行了測試並開始工作。 – kosmos

當頁面加載元素被隱藏時，當鼠標在圖像上結束時，會顯示DIV標籤。問題在於它閃爍。你可以檢查小提琴@ http://jsfiddle.net/2My79/1/ –

您可以使用此還有：

$(document).ready(function() 
     { 
      $("#ProjectPicture").mouseover(function() { 
     // do work for mouse over 
       $("#overlayInfo").show(); 
     }).mouseleave(function() { 
     $("#overlayInfo").hide(); 
     // do work for mouse out 
      }); 
     });

和你的HTML：

<div id="ProjectPicture"> 
    <img src="https://lh4.googleusercontent.com/-NnUDSkolO6M/AAAAAAAAAAI/AAAAAAAAAPg/Rp2eTavq49w/s120-c/photo.jpg"> 
</div> 

<div id="overlayInfo" style=""mouseoverlay:none> 
    hello 
    <li class="fa fa-cloud" title="Web"></li> 
    <li class="fa fa-shopping-cart" title="Shopping Cart"></li> 
</div>

活生生的例子：http://jsbin.com/tocotita/2/edit

來源

2014-06-13 09:52:52

謝謝，你可以檢查解釋http://jsfiddle.net/2My79/1/問題的小提琴。 –

顯示隱藏圖像使用jquery鼠標懸停的DIV問題

回答

相關問題