html - 垂直导航栏(悬停)

Question

我需要帮助来创建导航栏，我已经在 Photoshop 中设计了它，但我是编码新手，而且我很难获得我想要的东西。

我已经很接近了，但是代码并没有我想要的那么简单。

HTML:

<div id="navbar">
    <div class="line1">
        <div class="text1">Home</div>
    </div>
    <div class="line2">
        <div class="text2">Work</div>
    </div>
    <div class="line3">
        <div class="text3">About</div>
    </div>
</div>

CSS:

#navbar {
    position: absolute;
    text-align: right;
    top: 2em;
    right: 3em;
}

.line1 {
    background-color: white;
    opacity: 0.3;
    height: 3.5em;
    width: 0.2em;
    margin-bottom: 1em;
}

.text1 {
    color: white;
    font-family:'Nanum Myeongjo', serif;
    font-weight: 800;
    float: right; 
    margin-top: 1.5em;
    margin-right: 1.5em;
    visibility: visible;
}

.line1:hover > .text1 {
    visibility: visible;
}

(我只显示了第一个导航选项卡的 CSS，但 2 和 3 是相同的)。

这是我的设计，导航栏位于右上方: https://imgur.com/a/xgmuNAC

https://jsfiddle.net/s6u8gone/

Answer 1

您是否希望链接的实际文本仅在悬停时显示？如果是这样，你就很接近了；但不是使用 visibility:visible;，而是使用 opacity:1;，然后将文本类设置为默认为 opacity:0;。如图:

.text1 {
    color: white;
    font-family:'Nanum Myeongjo', serif;
    font-weight: 800;
    float: right; 
    margin-top: 1.5em;
    margin-right: 1.5em;
    opacity:0;
    transition:0.7s ease;
}

.line1:hover > .text1 {
    opacity:1;
    transition:0.7s ease;
}

根据作者评论编辑:

.line1:hover {
  opacity:1;
}

https://jsfiddle.net/v14fq6md/