Question

我在创建导航栏时需要帮助，我已经在Photoshop中对其进行了设计，但是我对编码并不陌生，我一直在努力获取自己想要的东西。

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

HTML：

sum

CSS：

appr['appr_sum'] = [sum(v for k, v in x.items() if k > 3) for x in appr['approval']]
print (appr)
   movie_id       user_id        rating      approval  appr_sum
0         1  [5, 2, 1, 6]  [4, 4, 5, 4]  {4: 3, 5: 1}         4
1         2        [5, 1]        [3, 3]        {3: 2}         0
2         3           [1]           [4]        {4: 1}         1
3         4           [1]           [3]        {3: 1}         0
4         5           [1]           [3]        {3: 1}         0
5         6           [1]           [5]        {5: 1}         1
6         7        [6, 1]        [2, 4]  {2: 1, 4: 1}         1
7         8        [1, 6]        [1, 4]  {1: 1, 4: 1}         1
8         9        [1, 6]        [5, 4]  {5: 1, 4: 1}         2

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

这是我的设计，导航栏位于右上方： Example 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/

垂直导航栏（带有悬停）

1 个答案: