导航栏由图像组成

我有五个不同的图像被用作我网站导航的按钮。我希望它们在浏览器窗口中水平内嵌并居中。他们看起来很好，直到我添加代码时，将鼠标悬停在每个图像上方时，每个按钮下方都会显示文本。现在按钮在窗口中间垂直对齐。导航栏由图像组成

在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

导航栏由图像组成

回答

相关问题