Question

我正在开发一个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>

我的问题：
我需要一个功能才能完美地工作，淡出＆＃34; coverDetail＆＃34;用户在封面图片上悬停的卡片中的元素。当用户鼠标移开封面图片时，特定卡片的封面详细信息应该淡出 我有大约150张卡/页，我需要这个功能才能为每张卡工作 谢谢:)）

Answer 1

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

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

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

Answer 2

首先需要隐藏说明：将以下代码段添加到您的CSS代码中：

.coverDetail {
    display: none;
}

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

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

以下是示例：JSFiddle

Answer 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>

Answer 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>

鼠标悬停/退出时，Javascript / jQuery函数淡入/淡出

4 个答案: