0

ホバーしていないときに非表示にし、ホバーしたときに表示したい次の順序付けられていないリストがあります。

<ul class="viewer">
<li><a href=".html">Menu</a></li>
<div>
<ul>
<li><a href=".html">1</a></li>
<li><a href=".html">2</a></li>
<li><a href=".html">3</a></li>
<li><a href=".html">4</a></li>
<li><a href=".html">5</a></li>
</ul>
</div>

cssは以下です

div ul li {visibility: hidden;}

ご覧のとおり、リスト項目を div でラップし、可視性を非表示に設定しました。

jQuery の hover メソッドによれば、非常に簡単な方法でリスト項目の可視性を可視に設定できるはずです。

$('ul li')

.hover

(function()
{
.css("visibility","visible");
}

),

(function()
{
.css("visibility","hidden");

});

少し確信が持てないのは、$('ul li') です。また、私が行ったように、ホバリング効果の中に css 機能を追加しても問題ありませんか? 私が行ったように、CSSを関数に追加する必要があるかどうかはわかりませんでした。すべてのヒントをいただければ幸いです。

4

2 に答える 2

1

そのために jQuery や JavaScript さえも必要ありません。CSS の疑似クラスを使用するだけ:hoverです。JavaScript を有効にしていないユーザーを想像してみてください...

ul li{
  // style of your list
  visibility: hidden;
}

ul li:hover{
  // style of your list when hovered
  visibility: visible;
}

また、リストをdivhere にラップする必要はありません。正当な理由がない限り、要素をラップしないでください。ブラウザでのサイトのレンダリングが遅くなります。

于 2012-06-24T11:35:01.910 に答える
0

hide() コマンドを使用することもできます。

this.hide();

また

this.show();

それはうまくいくはずです^^

独自のスクリプトを機能させるには、これを変更する必要があります。

.css("visibility","visible");

これに：

this.css("visibility","visible");
于 2012-06-24T11:37:46.683 に答える