0

USAToday (執筆時点) にあるように、div マウスオーバー トランジションを実装するように依頼されました。

基本的に、Web サイトには次の構造のボックスがいくつかあります。

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

ページの読み込み時には、「フロント」の div のみが表示されます。任意の「アセット」にカーソルを合わせると、「背面」の div がフェードインして「前面」の div をカバーし、マウスを離すと「背面」の div がフェードアウトし、前面のボックスが再び表示されます。

私は Web デザイナーではありませんが、Web と JavaScript については十分に知っています。ソース コードを (firebug を使用して) 分析しましたが、この移行がどのように達成されるかを完全に理解することはできませんでした。

私が見つけた解決策の 1 つは、JQuery フェードイン/フェードアウトを使用することですが、問題があります。動作は正しく複製されますが、バック div はフロント div の上ではなく、フロント div の下に表示されます。

usatoday の動作を正確に再現する方法を提案できますか?

4

1 に答える 1

4

重要なのは、ブロック要素にposition: relativeを指定し、要素内に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";
}
于 2013-05-06T14:06:46.770 に答える