切换课程效果不佳答案

【问题标题】：Toggling class not working well切换课程效果不佳
【发布时间】：2012-05-07 18:44:49
【问题描述】：

在我的应用程序中并排列出了一堆图像。当悬停图像时，会显示有关图像的信息（描述、标题等）。这在大多数情况下都有效，但很多时候却没有。

例如，当我悬停图像并重新加载页面时，切换会在该图像的另一个方向上起作用，即。默认情况下，隐藏的 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;
}

【问题讨论】：

标签： jquery css hover toggle

【解决方案1】：

我会尝试改用toggleClass 方法：

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

请参阅this jsFiddle 进行演示。

【讨论】：

感谢您的回答！我尝试了您的解决方案，但悬停图像时没有任何反应。我尝试将代码中的“post”更改为适用于悬停部分的“postDesc”，但是当我从图像中移除光标时，该类仍然存在。也许我做错了什么？
您的代码似乎对我不起作用。尝试了来自 jsFiddle 的代码，但该类在悬停时会一直快速打开/关闭。在“postDesc”中我有“display:none;”，所以我想知道切换类是否有效？

【解决方案2】：

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

【讨论】：

这不是和我的答案几乎一模一样吗？