悬停时滑块元素OUT

我有一个信息框叠加在它上面的图像，下面发布css。悬停时滑块元素OUT

正常情况下，将鼠标悬停在图像上时会出现这种情况，但是，我想要的是相反的。悬停图像时，我希望该框可以向外/向下滑动约-50像素。有人得到这个小费？

.imgTitleInfoTop { 
    -moz-box-sizing: border-box; 
    bottom: 0; 
    font-size: 24px; 
    font-weight: 500; 
    height: 60px; 
    line-height: 22px; 
    width: 370px; 
}

来源

2013-06-20 Thor

[这可能会有帮助。]（http://www.usabilitypost.com/2011/04/19/pure-css-slideout-interface/） – lifus

嗨，谢谢，但这与我试图做的事情相反。整个过程中，我的图像上都有一个盒子，当我将它悬停时，我想要滑出。 :) – Thor

你在找这样的事情吗（使用Jquery）？

<script type="text/javascript"> 
$('.imgTitleInfoTop').hover(function() { 
    $(this).animate({ 
    height: 0 
    }, 300); 
}, function() { 
    $(this).animate({ 
    height: '60px' 
    }, 300); 
}); 
</script>

来源

2013-06-20 08:39:08

我的理解，你想，当你将鼠标悬停在图像.imgTitleInfoTop元素隐藏，所以代码应该是这样的，那么：

<script type="text/javascript"> 
$('.yourImage').hover(function() { 
    $(.imgTitleInfoTop).animate({ 
    height: 0 
    }, 300); 
}, function() { 
    $(.imgTitleInfoTop).animate({ 
    height: '60px' 
    }, 300); 
}); 
</script>

（300以毫秒为单位的时间，怎么样这个动作需要做的很多，所以你可以让它更快或更慢）

来源

2013-06-20 10:16:38

悬停时滑块元素OUT

回答

相关问题