0

メニューには、ギャラリー、連絡先、および概要の 3 つの項目があります。ユーザーがギャラリーにカーソルを合わせると、連絡が必要で下に移動しようとしていますが、これを行うのに問題があります。私が何をすべきか知っている人はいますか？

私が使用しているHTMLは次のとおりです。

<div class="nav" align="center">  
<a style="opacity: 0;" class="nav_item" id="galleries">GALLERIES</a><br><br><br>
<div id="lower">
<a style="opacity: 0;" class="nav_item" id="about">ABOUT</a><br><br><br>
<a style="opacity: 0;" class="nav_item" id="contact">CONTACT</a>
</div>
</div>

CSSは次のとおりです。

#galleries:hover #lower{
top:40%;
-webkit-transition-property:top;
-webkit-transition-duration:0.5s;   
}

編集：

問題を修正しました！助けてくれてありがとう！

4

2 に答える 2

0

これを実現するには、現在の HTML で次のようにします。

#nav:hover ~ #lower a {
    top: 40px;
    -webkit-transition: top 0.5s linear;
}

JS フィドルのデモ。

これは、general-sibling ( ~) コンビネータを使用して、要素の後の兄弟 (すべての兄弟ではない#nav:hover) を識別し、それらをアニメーション化します。

40pxパーセンテージの変更には親からの既知の高さが必要なためではなく、使用しまし40%たが、これはあなたの質問では特定されていません。

ちなみに、 (投稿された HTML 内の)すべての要素にはopacityofがありますが、 and要素を除いて、ユーザーは、表示されないインタラクティブなコンポーネントをどのように識別すればよいでしょうか?0divbr

于 2013-09-25T09:06:54.630 に答える