javascript - 前/后 DIV 过渡鼠标悬停，如今日美国

Question

我被要求实现一个 div 鼠标悬停过渡，就像今日美国(在撰写本文时)一样。

基本上，该网站有一些具有这种结构的框:

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

在页面加载时只显示“前面”的 div。将鼠标悬停在任何“ Assets ”上时，“后”div 会淡出覆盖“前”div，鼠标移开时“后”div 会淡出，再次显示前框。

我不是网页设计师，虽然我对网页和 javascript 有足够的了解。我确实分析了源代码(使用 Firebug )，但我无法完全理解这种转变是如何实现的。

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

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

Answer 1

关键是要有一个带有position: relative 的 block 元素，然后是带有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";
}