如何在html5頭部添加懸停效果？

我是新用戶界面或網頁開發。我試圖做簡單的簡單頁面。所以我採取http://ionicframework.com/getting-started/頁面，並試圖使我的演示應用程序相同。因此，我將整個頁面分成三部分標題，爭論，和footer.So我首先爲標題工作，我面臨一些問題。如何在html5頭部添加懸停效果？

在頭部有選項「產品，入門文檔」等他們變成白色時，懸停事件火災.could請你告訴我怎麼會在我的演示做。
如何設置的產品的位置，入門文檔」在右側？
如何在較低的頭添加搜索輸入字段。這裏是我的代碼。

http://codepen.io/anon/pen/rabRoO

<html ng-app="ionicApp"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <title>Ionic List Directive</title> 

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
    </head> 

    <body > 
<div > 
    <div class="header"> 
    <a href="#">product</a> 
    <a href="#">Getting Started</a> 
    <a href="#">docs</a> 
    <a href="#">showcase</a> 
    <a href="#">forum</a> 
    <a href="#">Blog</a> 
    </div> 
    <div class ="container"> 
    <h1>Getting Started with Ionic</h1> 
    <p>Build mobile apps faster with the web technologies you know and love</p> 
     <div class ="smallheader"> 
    <div class="col-sm-8 news-col"> 
      Questions? Head over to our <a href="http://forum.ionicframework.com/">Community Forum</a> to chat with others using the framework. 
     </div> 
    </div> 
    </div> 

</div> 



    </body> 
</html>

來源

2015-04-03 user944513

（1）菜單項樣式：首先應將鏈接包裝到列表中，並使用display: inline-block;上的<li>最常用於此類工作。

<ul class="navbar"> 
    <li><a href="#">product</a></li> 
</ul>

（2）要對齊項權利：只需添加text-align: right;到<ul>和所有<li>的內線將是右對齊的，因爲我們做了他們作爲內聯元素了。

更新演示：http://jsfiddle.net/oLws3fsk/

（3）你沒有一個搜索框，在你的代碼，但你可以只是將它加入導航欄下。

來源

2015-04-03 16:32:22 Stickers

你的意思是，因爲CSS懸停這樣的：

.header:hover { 
    border :5px solid green; 
}

來源

2015-04-03 15:59:00 Legendary

不檢查網站http://ionicframework.com/getting-started/並去產品，「doc」它變成了白色 – user944513 2015-04-03 16:00:35

如何在html5頭部添加懸停效果？

回答

相關問題