导航栏由图像组成

debugcn 发表于 Dev

卡桑德拉

我有五个不同的图像用作网站导航的按钮。我希望它们水平内联并在浏览器窗口中居中。它们看起来不错，直到我添加代码以使文本悬停在每个图像上方时，每个按钮下方都会显示文本。现在，所有按钮都在窗口中间垂直对齐。

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

任何帮助将非常感激！谢谢你。

颜色

首先，我要谈谈您的标记。我知道这不是代码审查，也不是与问题完全相关的，但是当我查看HTML时，我只是无能为力：

一div.nav只是尖叫，我认为你是想要使用nav
这div.container似乎对我而言是过时的，只是增加了标记。如果您确实需要容器类（出于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>

然后，对于您的实际问题，我不完全确定我了解您要实现的目标，但这就是我想出的。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;
}

请注意，我之所以这样做opacity，是visibility因为它允许您添加一个过渡，我发现该过渡会带来更好的体验。您还应该能够为即时状态切换使用可见性（或只是删除过渡）。

我希望这能使您走上正确的道路。如果我误解了任何内容，或者您想让我进一步解释，请告诉我。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。