導航欄由圖像組成

我有五個不同的圖像被用作我網站導航的按鈕。我希望它們在瀏覽器窗口中水平內嵌並居中。他們看起來很好，直到我添加代碼時，將鼠標懸停在每個圖像上方時，每個按鈕下方都會顯示文本。現在按鈕在窗口中間垂直對齊。導航欄由圖像組成

在HTML文件：

<div class="nav"> 
     <div class="container"> 
      <ul> 
      <div class="about"> 
      <li><input type="image" src="image.png" id="aboutPage" onClick = 'aboutPage()'/></li> 
      <p class = "text1"> About </p> 
      </div> 

      <div class="resume"> 
      <li><input type="image" src="image.png" id="resumePage" onClick = 'resumePage()'/></li> 
      <p class = "text2"> Resume </p> 
      </div> 

      <div class="home"> 
      <li><input type="image" src="image.png" id="homePage" onClick = 'homePage()'/></li> 
      <p class = "text3"> Home </p> 
      </div> 

      <div class="portfolio"> 
      <li><input type="image" src="image.png" id="portfolioPage" onClick = 'portfolioPage()'/></li> 
      <p class = "text4"> Portfolio </p> 
      </div> 

      <div class="contact"> 
      <li><input type="image" src="image.png" id="contactPage" onClick = 'contactPage()'/></li> 
      <p class = "text5"> Contact </p> 
      </div> 
     </ul> 
     </div>

在CSS文件：

.nav { 
    position: absolute; 
    bottom: 0%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

.nav .container { 
    font-size: 12px; 
    font-family: 'Shift', sans-serif; 
    color: #5a5a5a; 
    font-weight: lighter; 
} 

.nav .container ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

.nav .container li { 
    display: inline; 
}

下面是懸停代碼的每個圖像樣本：

.nav .container .about .text1 { 
    position:relative; 
    bottom:0px; 
    text-align: center; 
    visibility: hidden; 
} 

.nav .container .about:hover .text1{ 
    visibility: visible; 
}

任何幫助將是非常感激！謝謝。

來源

2015-04-25 Cassandra

首先，當談到你的標記時，我有一些評論。我知道這是不是代碼審查，而不是完全的問題有關，但我不能幫助我自己，當我看HTML：

一個div.nav只是尖叫，我認爲你實際上要使用一個nav
那div.container似乎obsolote給我，只是增加了標記。如果你真的需要容器類（爲了CSS或JS原因），爲什麼不把它添加到ul。
和ul只能有li元素作爲直接孩子，所以這些div元素應該成爲li的孩子而不是父母。
爲什麼你使用（非常罕見）input[type=image]元素，而不是通常的<a><img></a>？這似乎很奇怪。
對每個文本使用不同的類似乎沒有任何用處。它只是讓你的代碼難以維護，你的CSS更加冗長。我想知道你是否需要課程，但是如果你有一個很好的理由，至少對所有的文本塊都使用同一個課程。

考慮這些意見考慮進去，我的標記會是這個樣子：

<nav> 
    <ul class='container'> 
     <li> 
      <a href='#'> 
       <img src='' alt='do not forget your alt, especially for nav!' /> 
       <p>text</p> 
      </a> 
     </li> 
     ... 
    </ul> 
</nav>

然後爲您的實際問題，我不能完全肯定我理解你想什麼來實現，但this is what I came up with。 CSS看起來像這樣。

nav { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    transform: translate(0, -50%); 
    text-align: center; 
} 
nav ul { 
    font-size: 12px; 
    font-family:'Shift', sans-serif; 
    color: #5a5a5a; 
    font-weight: lighter; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
nav li { 
    margin: 12px; 
    display: inline-block; 
} 

nav p { 
    opacity: 0; 
    transition: opacity .5s; 
} 
nav a:hover p { 
    opacity: 1; 
}

注意，我在visibility代替去了opacity因爲它允許你添加一個過渡，我覺得這給一個更加美好的體驗。即使狀態切換也可以使用可視性（或者只是刪除轉換）。

我希望這能讓你走上正軌。如果我誤解了任何內容，或者希望我進一步解釋，請告訴我。

來源

2015-04-25 20:36:23 Pevara

導航欄由圖像組成

回答

相關問題