這是如何完成的？（JavaScript還是其他？）

我以某種方式發現了這個網頁，並被導航欄絕對驚呆了。 www.webdesignerwall.com這是如何完成的？（JavaScript還是其他？）

當您將鼠標放在「主頁」，「關於」或「作業」菜單選項上時，您會在上面的棕色字段中獲得令人敬畏的翻轉效果。我非常喜歡這一點，並有類似的想法，但作爲一個業餘愛好者，我無法真正說出是什麼類型的節目。我會說它本身使用Ajax或JavaScript，但我想讓你們中的一些人向我解釋，甚至分享一些類似的例子。

謝謝

來源

2010-11-01 Slavisa Perisic

您可以通過看你提到 – smirkingman 2010-11-01 14:37:41

這是由CSS完成的。它將每個<a>鏈接元素添加一個額外的<span>。與CSS <span> s隱藏並正確定位在菜單元素上方（absolute）。當其中一個鏈接懸停時，新的樣式適用於正確的<span>，這使其可見。

HTML

<ul id="nav"> 
    <li id="nav-home"><a href="/>Home<span></span></a></li> 
    <li id="nav-about"><a href="/about/">About<span></span></a></li> 
    <li id="nav-jobs"><a href="/jobs/">Jobs<span></span></a></li> 
</ul>

CSS

#nav span { 
display: none;  /* hidden by default */ 
position: absolute; 
} 

#nav a:hover span { /* link:hover */ 
display: block;  /* makes one of them visible */ 
} 

#nav-home span { 
background: url(images/home-over.gif) no-repeat; 
width: 168px; /* each has it's own image */ 
height: 29px; /* dimensions */ 
top: -30px;  /* and coordinates */ 
left: 35px; 
} 

#nav-about span { 
background: url(images/about-over.gif) no-repeat; 
width: 157px; 
height: 36px; 
top: -36px; 
left: 90px; 
} 
/* ... */

來源

2010-11-01 14:31:30 galambalazs

@apnerve - 我不認爲這被認爲是CSS sprites。單個圖像正在被使用在各自的容器中，這些容器正在被隱藏和顯示。 – user113716 2010-11-01 14:41:23

@apnerve - 帕特里克是對的。 Css精靈在這裏不是正確的名詞。 – galambalazs 2010-11-01 14:43:18

哎呀..對不起。他們不是精靈。 – apnerve 2010-11-02 11:20:03

這種效果也可以用CSS沒有JavaScript來實現：

CSS Image rollovers

來源

2010-11-01 14:30:49

網站的HTML自己解決這個問題謝謝，那東西我一直在尋找 – 2010-11-01 14:31:55

*「這種效果也可以通過不使用JavaScript的CSS來完成」*所以它是:) – jensgram 2010-11-01 14:55:38

@jensgram - 我沒有看到他們的具體解決方案離子。這也是我提到的一個被刪除的職位。我只是提供了可能性。 – 2010-11-01 14:58:24

這只是CSS。

每個環節都有一個id屬性，每個id都有自己的CSS規則，它改變了導航欄上的hoverbackground。

來源

2010-11-01 14:31:28

這是如何完成的？ （JavaScript還是其他？）

回答

相關問題

這是如何完成的？（JavaScript還是其他？）