地铁风格瓷砖答案

【问题标题】：Metro Style Tiles地铁风格瓷砖
【发布时间】：2014-05-08 08:25:50
【问题描述】：

我需要一些帮助来完成关于 Metro 风格瓷砖的工作。

我的第一个问题是主容器 div 元素看起来不像我想要的（背景和大小）第二个有点复杂。如果您检查下面的链接，您会看到灰色的 div 元素，当鼠标没有悬停在图像上时，它不应该出现。当我将鼠标悬停在图像上时，我只想看到描述 div 并看到 div 部分动画像透明的 div 一样。就像编码一样，我的灰色 div 就像它在所有元素之上一样

HTML：

<div class="kutu">
    <div class="icerik">
        <img alt="Resim" src />
    </div>
    <div class="metin">
        <div class="metinBaslikAlani"></div>
        <div class="metinBaslik">Slogan</div>
        <div class="adet"><span>4</span></div>
        <div class="metinIcerik">Herkese Ulaşıyoruz</div>
    </div>
</div>

JavaScript：

$('.kutu').hover(function () {
    $(this).css("border", "5px solid #FFFF00");
    $(this).css("margin", "1px 3px 1px 3px");
    $(this).css("cursor", "pointer");

    $(this).find(".metin").stop().animate({ 
        top: "-168px" 
    }, 300);
});

http://jsfiddle.net/H4vbB/54/

【问题讨论】：

标签： jquery jquery-animate microsoft-metro tile

【解决方案1】：

尝试在你的 .kutu 样式中使用 css-property overflow 和值 hidden：

.kutu {
    ...
    overflow: hidden;
}

查看更新的小提琴：http://jsfiddle.net/ArtemFitiskin/H4vbB/55/

【讨论】：