0

div を使用してドロップダウン メニューを作成しようとしています。div の移行は問題なく、すべてがうまく機能しています。しかし、ホバリングしていないときにドロップダウン領域にあるテキストを非表示にする方法がわかりませんか?

HTML コード。それほど多くはありませんが、必要に応じて低下しています。メニューの下に書かれたテキストだけを非表示にしたくありません。

<div class="dropdown">Menu
    <br/>Games
    <br/>Food 
    </div>

CSS コード。トランジションとすべて。

div.dropdown
{
    position:absolute;
    width:920px;
    height:20px;
    top:110px;
    left:50%;
    margin-left:-460px;
    z-index:1;
    background-color:gray;
    -webkit-transition: height 2s ease;
    background:black;
    text-align:center;
    color:White;
}

div.dropdown:hover
{
    height: 45px;
    -webkit-transition: height 0.1s ease;
}
4

2 に答える 2

1

CSSを使用できます：

overflow: hidden;

.dropdown クラスで。

これにより、要素の境界外に表示されるものをすべて非表示にすることができます。

ここにフィドルがあります

于 2013-05-14T19:00:09.670 に答える
0

<ul>ドロップダウン項目がdiv 内の順序付きリストになるように html を変更します

リストが通常非表示になるように css を追加します。

div.dropdown ul{
   display:none;
}
div.dropdown ul:hover{
   display: block;
}

また、ドロップダウン div の既存の高さ制限を削除します。

次に、メニューにカーソルを合わせたときにリストを表示する JavaScript/jQuery

$('div.dropdown, div.dropdown ul').on('hover', function(){
   $('div.dropdown ul').show();
}
$('div.dropdown, div.dropdown ul').on('mouseleave', function(){
   $('div.dropdown ul').hide();
}
于 2013-05-14T18:56:55.740 に答える