0

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

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

这是我的代码示例：

http://jsfiddle.net/hTB3q/

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

谢谢！

4

4 回答 4

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。

于 2013-08-21T11:57:42.910 回答
0

尝试

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

演示：小提琴

于 2013-08-21T11:45:16.887 回答
0

干得好。

您需要一些额外.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/

于 2013-08-21T11:47:42.737 回答
0 
$('.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/

于 2013-08-21T11:51:25.050 回答