Question

我被要求实施div mouseover过渡，就像它在USAToday（写作时）一样。

网站基本上有一些具有这种结构的盒子：

<div class="asset">
   <div class="front">'image and some text'</di>
   <div class="back">'some other text'</div>
</div>

在页面加载时，仅显示“前”div。通过悬停在任何“资产”上，“后退”div在覆盖“前”div时消失，鼠标移出“后退”div淡出，再次显示前框。

我不是网页设计师，尽管我对网络和JavaScript有足够的了解。我确实分析了源代码（使用firebug），但我无法完全理解如何实现这种转换。

我找到的解决方案之一是使用JQuery fadeIn / fadeOut但是我遇到了问题：行为被正确复制，但是后面的div出现在前面的div下面而不是它上面。

你能建议一种方法来复制确切的usatoday行为吗？

Answer 1

关键是要使用位置：相对的块元素，然后使用 position：absolute ：

的内部元素

http://jsfiddle.net/coma/FeVsr/12/

<强> HTML

<div class="news">
    <a href="#" class="boxing" style="background-image:url(https://si0.twimg.com/profile_images/3162594037/e232a8ce35fe8ce856e4a52a16141f20.jpeg);">
        <div class="summary">...</div>
        <div class="content">...</div>
    </a>
    <a href="#" style="background-image:url(https://si0.twimg.com/profile_images/3162594037/e232a8ce35fe8ce856e4a52a16141f20.jpeg);">
        <div class="summary">...</div>
        <div class="content">...</div>
    </a>
</div>

<强> CSS

body {
    font-family: Arial, Helvetica, sans-serif;
}

div.news {
    padding: 10px;
    background: #eee;
}

div.news:after {
    content: "";
    display: block;
    clear: both;
}

div.news > a {
    display: block;
    float: left;
    width: 200px;
    border: 5px solid #fff;
    margin: 0 8px 8px 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, .5);
    position: relative;
    background: #009BFF none no-repeat top;
    background-size: cover;
    font-size: 12px;
    text-decoration: none;
    color: #fff;
}

div.news > a > div.summary {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    padding: 5px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .7);
    line-height: 1.4em;
}

div.news > a > div.content {
    min-height: 200px;
    position: relative;
    opacity: 0;
    background-color: inherit;
    transition: opacity .5s;
    padding: 25px 5px 5px 5px;
    z-index: 1;
    font-size: 13px;
    line-height: 1.4em;
}

div.news > a:hover > div.content {
    opacity: 1;
}

div.news > a:before {
    content: "news";
    display: block;
    padding: 3px;
    background-color: inherit;
    position: absolute;
    top: 0;
    left: 0;
    text-transform: uppercase;
    z-index: 2;
}

div.news > a.people {
    background-color: #9600B4;
}

div.news > a.boxing {
    background-color: #EB1E00;
}

div.news > a.business {
    background-color: #00A53C;
}

div.news > a.people:before {
    content: "people";
}

div.news > a.boxing:before {
    content: "boxing";
}

div.news > a.business:before {
    content: "business";
}

正面/背面DIV过渡鼠标悬停，如今日美国

1 个答案: