0

cssを介してビューポートの外に隠され、：hover疑似クラスを介して含まれているliのホバーに表示されるナビゲーションがあります。以下のマークアップとcss。

ul li div#someid{position:absolute;left:-9999px;opacity:0;}
ul li:hover div#someid { left:0;opacity:1;z-index:9000;}




 <ul>
     <li>
     <div>The Content to Hide <a href="#runAjax">Click Me</a></div>
     </li>
 </ul>

「ClickMe」をクリックすると、ハッシュ値に基づいてページの一部にデータを入力するjQueryを実行します。これはすべて正常に機能します。私がやろうとしているのは、 cssを<div>...</div>介して現在表示されているを強制的に非表示にすることです。:hover

私は読んで設定しようとしましたが、.css('left','-9999px');もちろん.removeClass("hover");試し.hide()ましたが、これにより表示されなくなり、mouseOutが発生するとマウスがリンク上にホバリングしているため、次のように設定されていない限り、domに非表示になります。.show()

私が間違っていること、またはjQueryを介してホバー/マウスオーバーの動作を削除する方法に関するアイデア。

事前に教祖に感謝します。

4

2 に答える 2

0

:hover疑似クラスを使用している限り、これを達成することはできません。

:hoverクラスを使用せずに生きることができる場合、jQueryを介してそれを行う方法は次のとおりです：http： //jsfiddle.net/jHatE/

于 2011-07-20T00:45:55.013 に答える
0

JSを使用して、非表示にする要素にクラスを追加し、そのクラスの要素を非表示にするCSS（：hover CSSの後に）を作成することをお勧めします。

非表示にする新しいクラスのCSSは、それを表示するCSSの後にあるため、CSSの特異性がそれをオーバーライドしない限り、要素は非表示になります。

クラスの追加/削除は、多くの場合、どのCSSスタイルルールが特定の要素を制御するかを制御するための非常に優れた方法です。

たとえば、このオブジェクトに影響を与える他のスタイルルールの後にこのCSSスタイルルールを作成します。

.hidden {opacity: 0;}

そして、「hidden」クラスをオブジェクトに追加します。もう一度ホバーで表示したい場合は、「非表示」クラスを削除するだけです。

于 2011-07-20T00:38:15.047 に答える