Javascript/jQuery函数fadeIn/out，鼠标悬停/out

我正在从事一个php/mysql（+css jquery等）项目，在这个项目中，我必须创建一个函数，当鼠标悬停在图像上时，该函数会显示一些描述。 我做了一个函数，但在我使用它2-3次后（当我将鼠标放在图像上时）它似乎崩溃了
下面是代码和JSFIDLE的一部分：

jsfiddle:

代码：
html:

我使用的js函数正在崩溃：

$（文档）.ready（函数（）{
$（“.cover”）.mouseover（函数（）{
$（this.next（）.stop（）.fadeIn（）；
});
$（“.cover”）.mouseout（函数（）{
$（this.next（）.stop（）.fadeOut（）；
});
});

我的问题：
我需要一个功能，以完美地工作，fadeIn的“封面细节”元素从卡上的用户在封面图像悬停。当用户将鼠标移出封面图像时，特定卡的coverDetail将淡出。
我有大约150张卡/页，我需要为每一张卡提供良好的功能
谢谢：）

试试这个 Css:

jQuery：

<script type="text/javascript">
    $(document).ready(function(){
        $('.cover').hover(function(){
            $('.coverDetail').stop().fadeIn()
            },function(){
                $('.coverDetail').stop().fadeOut()
        })

    }); 
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.card').hover(function(){
            $('.coverDetail').stop().css({'border-top':'1px solid #ecf97e'}).animate({'height':'25px'},1000)
            },function(){
            $('.coverDetail').stop().css({'border-top':'0px'}).animate({'height':'0px'},1000)
        })
    }); 
</script>

$（文档）.ready（函数（）{
$（'.cover'）.hover（函数（）{
$（'.coverDetail'）.stop（）.fadeIn（）
}，函数（）{
$（'.coverDetail'）.stop（）.fadeOut（）
})
}); 

我个人更喜欢使用

.hover（）

-

---

请注意，您的css在fiddle中有一些小的更改。

您需要首先隐藏描述： 将以下代码段添加到

CSS

代码中：

.coverDetail {
    display: none;
}

然后，您需要使用以下代码分别显示和隐藏每张卡的说明：

$(function () {
    $(".cover")
        .mouseout(function () {
        $(this).parent().children('.coverDetail').fadeOut();
    })
        .mouseover(function () {
        $(this).parent().children('.coverDetail').fadeIn();
    });
});

---

下面是一个示例：

或者您可以在卡上设置悬停事件并运行动画

.coverDetail {
    position:absolute;
    width:220px;
    height:0px;
    margin-top: 114px;
    padding-left: 15px;
    padding-right: 15px;
    background: #e8ff28;
    overflow: hidden;
    z-index:100;
}

jQuery：

<script type="text/javascript">
    $(document).ready(function(){
        $('.cover').hover(function(){
            $('.coverDetail').stop().fadeIn()
            },function(){
                $('.coverDetail').stop().fadeOut()
        })

    }); 
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.card').hover(function(){
            $('.coverDetail').stop().css({'border-top':'1px solid #ecf97e'}).animate({'height':'25px'},1000)
            },function(){
            $('.coverDetail').stop().css({'border-top':'0px'}).animate({'height':'0px'},1000)
        })
    }); 
</script>

$（文档）.ready（函数（）{
$（'.card'）。悬停（函数（）{
$（'.coverDetail'）.stop（）.css（{'border-top'：'1px solid#ecf97e'}）。动画（{'height'：'25px'}，1000）
}，函数（）{
$（'.coverDetail'）.stop（）.css（{'border-top'：'0px'}）。动画（{'height'：'0px'}，1000）
})
}); 

你说的“崩溃”是什么意思？到底发生了什么？当我将光标放在封面图像上时，一切正常，我的“coverDetail”显示出来，但如果我继续将光标放在卡片描述上，功能会被隐藏的coverDetail状态卡住。卡片的描述总是显示。。当用户将光标放在封面图像上时，我只希望coverDetail淡入或淡出。@Alexandru Ahhh好的，我现在将更改：）另外，此函数应淡入或淡出用户悬停的卡的特定封面图像的coverDetail。这意味着如果我在页面上有多张卡，该功能应该可以工作。感谢您的更新，但请看以下内容：。仍然是错误的，只需将鼠标悬停在这个JSFIDLE中的一张卡上，然后查看所有卡的coverDetails发生了什么，而不仅仅是我悬停的那张卡。。

$(function () {
    $(".cover")
        .mouseout(function () {
        $(this).parent().children('.coverDetail').fadeOut();
    })
        .mouseover(function () {
        $(this).parent().children('.coverDetail').fadeIn();
    });
});

.coverDetail {
    position:absolute;
    width:220px;
    height:0px;
    margin-top: 114px;
    padding-left: 15px;
    padding-right: 15px;
    background: #e8ff28;
    overflow: hidden;
    z-index:100;
}

<script type="text/javascript">
    $(document).ready(function(){
        $('.card').hover(function(){
            $('.coverDetail').stop().css({'border-top':'1px solid #ecf97e'}).animate({'height':'25px'},1000)
            },function(){
            $('.coverDetail').stop().css({'border-top':'0px'}).animate({'height':'0px'},1000)
        })
    }); 
</script>