html - Iconfont 显示和悬停

Question

我的页面底部有五个链接。每个链接旁边是一个 <i></i>带有 Font Awesome 心形图标类属性。我试图让图标在悬停在链接上之前不显示。我有几个问题:

1) Display: hidden不适用于图标。那是正常的吗？ Visibility: hidden确实使它们消失了，但与可见性属性一样，它并没有将它们从文档流中移除。

2) 将鼠标悬停在链接上时，我无法让图标重新出现。我能让它们在悬停时重新出现的唯一方法是使用:

.main-nav__link-container:hover .main-nav__link__icon {
      visibility: initial;
}

上面CSS的问题是整个div被悬停都会显示心形，这意味着我可以悬停在一个不是链接的区域(图标所在的区域)上，图标会弹出，但不可点击。我只希望在实际链接悬停时显示图标。知道如何做到这一点吗？

具有完整 html/css 的代码笔(与问题相关的代码位于 html 和 css 的底部)。我已经注释掉图标的可见性:隐藏，以便您可以看到它们的位置:

https://codepen.io/pmc222/pen/jvJRyg

HTML

/* Styles link flex items */
    .main-nav__link {
      text-decoration: none;
      color: rgb(0, 0, 0);
      font-family: "Montserrat", sans-serif;
      font-size: 0.9rem;
      letter-spacing: 0.2em;
      padding-bottom: 5px;
      text-transform: uppercase;
    }
    
    /* Styles icon font next to nav links */
    .main-nav__link__icon {
      display: none;
      font-size: 0.9em;
      color: rgba(0, 0, 0, 0.6);
      margin-right: 3px;
      visibility: hidden;
    }
    
    *unsure what selector to put here* .main-nav__link__icon {
      visibility: initial;
    }
    
    /* Adds underline to links on mouse over */
    .main-nav__link:hover {
      border-bottom: 2px solid rgb(42, 136, 212);
    }

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"/>


<footer id="main-footer">
      <nav id="main-nav">
          <div class="main-nav__link-container">
            <i class="fas fa-heart main-nav__link__icon"></i>
            <a class="main-nav__link" href="wedding-party.html">Wedding Party</a>
          </div>
          <div class="main-nav__link-container">
            <i class="fas fa-heart main-nav__link__icon"></i>
            <a class="main-nav__link" href="venue-information.html">Venue Information</a>
          </div>
          <div class="main-nav__link-container">
            <i class="fas fa-heart main-nav__link__icon"></i>
            <a class="main-nav__link" href="accommodations.html">Accommodations</a>
          </div>
          <div class="main-nav__link-container">
            <i class="fas fa-heart main-nav__link__icon"></i>
            <a class="main-nav__link" href="event-information.html">Event Information</a>
          </div>
          <div class="main-nav__link-container">
            <i class="fas fa-heart main-nav__link__icon"></i>
            <a class="main-nav__link" href="registry.html">Registry</a>
          </div>
        </nav>
      </footer>

Answer 1

从代码来看，问题在于您正尝试使用链接类(位于 fa 图标之后)显示和隐藏图标，而如果您针对容器既有心脏又有链接，显示/隐藏就会成功。

如果您在 __link__icon 类中将可见性设置为隐藏，然后像这样在悬停时显示它:

.main-nav__link-container:hover .main-nav__link__icon {
  visibility:visible;
}

它应该显示。

Fiddle