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

我有一些缩略图，当你将鼠标悬停在它们上面时，它们会动画（使用jQuery），而我卡住的地方是在当前div的内部/它会有一个背景颜色（不透明会在上面，所以你可以看到下面的div的一小部分），以及div中的文本将被显示。关于悬停，在另一个顶部添加一个div

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

这里是我的代码示例：

http://jsfiddle.net/hTB3q/

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

谢谢！

来源

2013-08-21 user2212564

在这里你去。

您需要在.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-21 11:47:42

尝试

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

来源

2013-08-21 11:45:16

$('.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-21 11:51:25

你可以尝试的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-21 11:57:42

不错的解决方案:) –

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

回答

相关问题