切換類效果不佳

在我的應用程序中，一堆圖像並排列出。顯示懸停圖像信息（說明，標題等）。這在大多數情況下都適用，但很多情況下不適用。切換類效果不佳

例如，當我懸停圖像並重新加載頁面時，切換在該圖像上的另一方向上工作，即，默認情況下顯示隱藏的div，當我將它懸停時隱藏（在所有其他工作正常的圖像上）。

這真的很煩人，我不知道如何解決它。下面是這個代碼（希望它已經足夠了）。

如果有人可以幫我在這裏，我將不勝感激。

JS：

$('.post').hover(function() { 
     var image = $(this); 
     image.find('.postDesc').toggle(); 
    });

HTML：

<div class="post"> 
    <img class="images" src="../images/image.png"> 
    <div class="postDesc"> 
     // other code...

CSS：

.post { 
    background: white; 
    width: 200px; 
    height: 200px; 
    margin: 0px auto; 
    float: left; 
    margin-right: 30px; 
    margin-bottom: 30px; 
    position: relative; 
    padding: 5px; 
    -moz-box-shadow: 0 0 4px 1px #777; 
    -webkit-box-shadow: 0 0 4px 1px#777; 
    box-shadow: 0 0 4px 1px #777; 
} 

.postDesc { 
    background-color:rgba(136, 136, 136, 0.35); 
    color: white; 
    width: 180px; 
    height:180px; 
    display:none; 
    position:absolute; 
    margin: 5px; 
    left: 0; 
    bottom: 0; 
    padding: 10px; 
}

來源

2012-05-07 holyredbeard

我會嘗試使用toggleClass方法來代替：

$(this).find(".postDesc").toggleClass("post");

請參閱this jsFiddle進行演示。

來源

2012-05-07 18:46:13

感謝您的回答！我嘗試了你的解決方案，但是當懸停圖像時並沒有真正發生。我嘗試將代碼中的「post」更改爲「postDesc」，它適用於懸停部分，但是當我從圖像中刪除光標時，該類仍然存在。也許我做錯了什麼？ – holyredbeard

用jsFiddle更新。 –

你的代碼似乎不適合我。嘗試了jsFiddle的代碼，但是在懸停時班級保持非常快速的開/關狀態。在「postDesc」中，我有「顯示：無;」，所以我想知道是否切換類作品？ – holyredbeard

$('.post').hover(
function() { 
    $('.postDesc', $(this)).addClass('post'); 
}, 
function() { 
    $('.postDesc', $(this)).removeClass('post'); 
});

來源

2012-05-07 19:00:29 thecodeparadox

這與我的回答幾乎完全一樣嗎？ –

切換類效果不佳

回答

相關問題