0

私は次の状況を持っています: コンテンツを保持する中央の Div レイヤー。右下端には(bottom: 0, right: 0)、link と linklist の 2 つの要素を持つ配置された div があります。リンクリストは非表示にする必要があります。リンクにカーソルを合わせると、左に移動し、リンクリストがスライドインする必要があります。これを作成する方法:

CSS:

#page {
 position: relative;
} 
#linkholder {
 position: absolute;
 bottom: 10px;
 right: 0px;
}
#link {
 display: inline-block;
}
#linklist {
 display: none;
}

HTML:

<div id="page">
  content
  <div id="linkholder">
    <div id="link">Link</div>
    <div id="linklist">LINKS TO SLIDE IN WHEN HOVER LINK</div>
  </div>
</div>
4

1 に答える 1

0

CSSトランジションでこれを行うことができます。これは次のようになります。

#linklist {
    /* Set the animation and speed */
    /*general version*/
    transition: all 5s;
    /*browser specific versions*/
    -moz-transition: all 5s;
    -ms-transition: all 5s;
    -webkit-transition: all 5s;
    -o-transition: all 5s;
}
#linklist.hidden {
    /* Have it translated off the screen first*/
    -webkit-transform: translate(100px, 0);
    -moz-transform: translate(100px, 0);
    -ms-transform: translate(100px, 0);
    -o-transform: translate(100px, 0);
    transform: translate(100px, 0);
}

次に、#link にカーソルを合わせたときに #linklist のクラスを設定する javascript でコールバックを作成します。

var event = function () {
    document.getElementById('linklist').className = '';
    this.removeEventListener('mouseover', event);
};
document.getElementById('link').addEventListener('mouseover', event, true);

JS フィドル: http://jsfiddle.net/XWReQ/

于 2013-06-12T21:12:48.533 に答える