在菜單和子菜單懸停時隱藏文本

Question

當我將鼠標懸停在 menu1 及其子菜單中時，我想隱藏文本。 我該怎么做 ？ 這是我的代碼： http : //jsfiddle.net/bulina/F2R7F/

<p id="text"> <b>This is the text that will hide on hover</b> </p>
<div id="menu4">
<ul>
<li id="list"><center><a href="#" >Menu1</a></center>
<ul>
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub2</a></li>
<li><a href="#">Sub3</a></li>
<li><a href="#">Sub4</a></li>
<li><a href="#">Sub5</a></li>
<li><a href="#">Sub6</a></li>
<li><a href="#">Sub7</a></li>
<li><a href="#">Sub8</a></li>
</ul>
</li>   

<li><center><a href="#">Menu2</a></center>
<ul>
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub2</a></li>

</ul>
</li>

<li><center><a href="#">Menu3</a></center>
<ul>

<li><a href="#">Sub7</a></li>
<li><a href="#">Sub8</a></li>
</ul>
</li>
</div>

Answer 1

我們可以使用jQuery 懸停方法分別使用其回調來處理 mouseEnter 和 mouseLeave 事件。

$(selector).hover(mouseIn, mouseOut)

在上面的問題中， hover和mouseout兩種不同的 jQuery 方法在同一個 #text 元素上扮演獨立的角色。 因此他們的工作沒有給出預期的輸出。

所有功勞都歸功於@anton。 請參閱上面@anton 評論中的小提琴： jsfiddle.net/Alfie/F2R7F/2