Question

我有一些缩略图，当你将鼠标悬停在它们上面时，它们会动画（使用jQuery）并且我被卡住的地方是在当前div内部/上方应用div，它将具有背景颜色（不透明度将是在它上面，你可以看到下面的一些div），以及将显示的div中的文本。

我已经能够使用带有缩略图边框的jQuery添加一个类，但背景颜色和文本应用于它似乎不喜欢的类，有人可以建议我哪里出错吗？

以下是我的代码示例：

$('.video-thumbnail').hover(function () {
    $(this).animate({
        top: '-15px'
    }, 500);
    $(this).show('video-overlay');

谢谢！

Answer 1

您可以尝试使用CSS方法：http://jsfiddle.net/xQdsN/2/

 .video-thumbnail {
     position:relative;
     margin:0 auto;
     width:20% !important;
     display:inline-block;
     border:1px solid red;
     height:100px;
 }
 .video-thumbnail img{
     max-height: 100%;
     max-width: 100%;
     position: relative;
 }
.video-thumbnail:hover>.video-overlay{
    bottom: 0px;
    opacity: 1;
}
 .video-overlay {
     position: absolute;
     background: rgba(0, 0, 0, 0.5);
     top: 0px;
     left:0px;
     right:0px;
     bottom: 100%;
     overflow: hidden;
    opacity: 0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
 }

不需要jQuery。

Answer 2

尝试

$('.video-thumbnail').hover(function () {
    $(this).finish().animate({
        top: '-15px'
    }, 500);
    $(this).find('.video-overlay').show();
}, function () {
    $(this).finish().animate({
        top: '0px'
    }, 500);
    $(this).find('.video-overlay').hide();
});

演示：Fiddle

Answer 3

你走了。

您需要在.video-overlay上添加一些额外的CSS并更改.video-overlay的选择器 CSS

 .video-overlay {
     display:none;
     background: rgb(58, 58, 58);
     /* Fall-back for browsers that don't
                                    support rgba */
     background: rgba(58, 58, 58, .5);
     height:100%;
     width:100%;
     position:absolute;
     top:0px;
     left:0px;
     float:left;
 }

的Javascript

$('.video-thumbnail').hover(function () {
    $(this).animate({
        top: '-15px'
    }, 500);
    $('.video-overlay', this).show();
}, function () {
    $(this).animate({
        top: '0px'
    }, 500);
    $('.video-overlay', this).hide();
});

JS在这里小提琴 http://jsfiddle.net/CkpZw/

Answer 4

$('.video-thumbnail').hover(function () {
    $(this).animate({
        top: '-15px'
    }, 500);

    $('.video-overlay', this).stop().fadeIn();
}, function () {
    $(this).animate({
        top: '0px'
    }, 500);
   $('.video-overlay', this).stop().fadeOut();
});

小提琴：http://jsfiddle.net/UYM4N/

在悬停时，在另一个顶部添加一个div

4 个答案: