2012-06-24 219 views
0

我有下面的無序列表,我想隱藏,當沒有盤旋,並顯示當盤旋。懸停效應jquery

<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的懸停的方法,你應該能夠在一個非常簡單的基礎上設置列表項可見的知名度僅僅通過

$('ul li') 

.hover 

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

), 

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

}); 

是什麼讓我有點不確定是$ ('ul li')。另外,像我所做的那樣,在懸停效果中添加CSS功能是否可行?我不確定是否應該像我一樣將CSS添加到函數中。 所有提示的讚賞。

+1

您的代碼充滿語法錯誤。 jQuery是JavaScript,而不是一些僞css語言。 – Esailija

+2

你的標記也有錯誤。第一個ul不關閉 –

+0

@Esailija請保持冷靜。並不是每個人都想像編程一樣的生活方式。我正在嘗試爲我的網站創建一些功能。因此,如果您將ul設置爲隱藏,請將自己的想法留給自己,然後回答我的問題Q –

回答

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; 
} 

而且,你不需要包裝列表爲div這裏,除非你有一個很好的理由這樣做不換行元素。它會減慢瀏覽器中網站的渲染速度。

+0

。它不會顯示菜單。換句話說,你需要一個div –

0

你也可以嘗試使用hide()命令。

this.hide(); 

this.show(); 

應該工作^^

讓自己的腳本的工作,你應該改變這樣的:

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

到這一點:

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