1

私たちはこの問題を抱えています

ここでは、私のメニューの基本的な構造を見ることができます

http://jsfiddle.net/L8FLe/2/

マウス ポインターで矢印をすばやくたどると (ヘッダーから下部のクロス メニューに移動)、すぐにサブメニューが表示されます。

属性 transition-duration ma を使用してこの操作 (0.7 秒) を遅らせようとしていますが、機能しません。実際には、マウスポインターがボタンgender1からgender2に移動したときにもサブメニューの表示を遅らせて、マウスクロスメニューをすばやく移動するとサブメニューが表示されないようにします。

みんなのおかげで、私の英語はとても下手です、ごめんなさい！

私のhtml

<p style="margin-left:50px">FOLLOW THE ARROW <BR /><BR /> &darr;</p>

<ul class='dd_menu'>
<li><a href='#nogo'>Gender 1</a>
    <div id="pluto">
    <a href='#nogo1'>Male</a><br />
    <a href='#nogo2'>Female</a>
    </div>
</li>
<li><a href='#nogo'>Gender 2</a>
    <div id="pluto">
    <a href='#nogo1'>Male</a><br />
    <a href='#nogo2'>Female</a>
    </div>
</li>

</ul>
----

私のCSS

.dd_menu { padding:0px; margin:0; list-style-type:none; height:30px; width:500px; margin:55px 0 0 55px; border:#CCC 1px dashed}
.dd_menu li {float:left; height:30px; border-right: solid 1px white; width:95px; }
.dd_menu li a {display:block;  height:28px;  padding:3px 5px 3px 5px;}

.dd_menu li:hover {position:relative; background-color:#DDD;  }

#pluto  {border:#CCC 1px solid; width:100px; display:none;}

.dd_menu li:hover #pluto { display:inline; width:95px; display:block;  -webkit-transition-duration: 1s;
    transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    -ms-transition-duration: 0.7s; }
4

1 に答える 1

0

css3 ドロップダウン メニュー、トランジション効果、トランジション タイミングなどに関するすばらしい記事があります。また、遅延のためにトランジションを適切に使用するセクションもあります。それが素晴らしいことを確認してください: http://www.identifydesign.net/tutorials/css/pure-css-animated-dropdown-menu/ 必要な情報は、タイミングの追加の見出しの下にあります。

また、以下を確認してください: 移行の遅延に関する W3school の記事: http://www.w3schools.com/cssref/css3_pr_transition-duration.asp

編集：

順序が間違っている可能性があります。次のようになります。

   transition-duration: 0.7s;
   -moz-transition-duration: 0.7s; /* Firefox 4 */
   -webkit-transition-duration: 0.7s; /* Safari and Chrome */
   -o-transition-duration: 0.7s; /* Opera *
于 2012-11-29T18:32:41.620 に答える