鼠标悬停/移出时的 Javascript/jQuery 函数淡入/淡出答案

【问题标题】：Javascript/jQuery function fadeIn/out on mouse over/out鼠标悬停/移出时的 Javascript/jQuery 函数淡入/淡出
【发布时间】：2014-03-23 09:27:59
【问题描述】：

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

jsfiddle: http://jsfiddle.net/c7d8g/

代码：
html：

<body>
    <div class="card">
        <img class="cover" src="http://www.unheap.com/wp-content/uploads/Blindify.png" />
        <div class="coverDetail">
            This by default is hidden
        </div>
        <div class="description">
            <a class="title" href="#">About this card</a>
            <p class="text">Description of this card.</p>
            <p class="author">@alex</p>
        </div>
    </div>
</body>

css：

.card {
    background: #0e0e0e;
    color:#a4a4a4;
    width:250px;
    height:320px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-right:20px;
    margin-bottom: 15px;
    float: left;
}
.cover {
    max-width:250px;
    max-height:140px;
    background: transparent;
    float:left;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.coverDetail {
    position:absolute;
    width:220px;
    height:25px;
    margin-top: 114px;
    padding-left: 15px;
    padding-right: 15px;
    background: #e8ff28;
    border-top: 1px solid #ecf97e;
    overflow: hidden;
    z-index:100;
}
.description {
    width:100%;
    height:50%;
    display: block;
    margin-top:150px;
}
.title {
    color:#b4b4b4;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 20px;
    text-decoration: none;
    text-transform: uppercase;
    margin-top:5px;
    margin-left:10px;
    overflow: hidden;
}
.title:hover {
    color:#62c6ff;
    border-bottom: 1px dotted #d9f1ff;
}
.text {
    font-family: sans-serif;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    max-height: 85px;
    margin-top: 5px;
    margin-left: 10px;
    width:90%;
    overflow-y:hidden;
    overflow-x:hidden;
}
.author, a {
    bottom: 100%;
    font-family: sans-serif;
    text-decoration: none;
    text-transform: lowercase;
    font-size: 9px;
    margin-left: 15px;
}

我做了但崩溃的js函数：

<script>
$(document).ready(function(){
    $(".cover").mouseover(function(){
        $(this).next().stop().fadeIn();
    });
    $(".cover").mouseout(function(){
        $(this).next().stop().fadeOut();
    });
});
</script>

我的问题：
我需要一个功能来完美地工作，从用户悬停在封面图像上的卡片中淡入“coverDetail”元素。当用户将鼠标移出封面图像时，特定卡片的 coverDetail 应该会淡出。
我有大约 150 张卡片/页，我需要该功能适用于每张卡片
谢谢:)

【问题讨论】：

“崩溃”是什么意思？到底发生了什么？
当我将光标移到封面图像上时，一切正常，我的“coverDetail”会显示，但如果我继续将光标向下移动到卡片描述，则功能会卡在 coverDetail 状态隐藏..

标签： javascript jquery css

【解决方案1】：

我个人更喜欢使用.hover() - Fiddle

$(document).ready(function(){
    $(".card").hover(function () {
        $(".coverDetail", this).stop(true, true).fadeIn();
    }, function () {
        $(".coverDetail", this).stop(true, true).fadeOut();
    });
});

请注意，小提琴中的 css 有一些细微的变化。

【讨论】：

卡片的描述总是显示..当用户将光标悬停在封面图像上时，我只希望coverDetail淡入或淡出..
@Alexandru Ahhh 好的，我现在改一下 :)
另外，这个函数应该淡入或淡出用户悬停的卡片的特定封面图像的coverDetail。这意味着如果我在页面上有多张卡片，功能应该可以工作。
感谢您的更新，但请看：jsfiddle.net/c7d8g/11。仍然是错误的，只需将鼠标悬停在此 jsfiddle 中的一张卡片上，看看所有卡片的coverDetails 会发生什么，而不仅仅是我悬停在的卡片..

【解决方案2】：

您需要先隐藏描述：将以下 sn-p 添加到您的 CSS 代码中：

.coverDetail {
    display: none;
}

那么你需要使用下面的代码来分别显示和隐藏每张卡片的描述：

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

示例如下：JSFiddle

【讨论】：

【解决方案3】：

试试这个 CSS：

.coverDetail {
    position:absolute;
    width:220px;
    height:25px;
    margin-top: 114px;
    padding-left: 15px;
    padding-right: 15px;
    background: #e8ff28;
    border-top: 1px solid #ecf97e;
    overflow: hidden;
    z-index:100;
    display:none;
}

jQuery:

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

    }); 
</script>

【讨论】：

【解决方案4】：

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

.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(){
        $('.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>

【讨论】：