垂直导航栏（带悬停）

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/