垂直导航栏（悬停）

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

您是否希望 link 的实际文本仅在悬停时显示？如果是这样，你就很接近了；但不使用 visibility:visible;，而是使用 opacity:1;，然后将文本 class 设置为默认使用 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/

垂直导航栏（悬停）

Vertical Navbar (With Hover)

html

css

navigation

nav

navbar