Iconfont显示和悬停

Question

我的页面底部有五个链接。每个链接旁边都有一个带有Font Awesome图标类属性的<i></i>。我试图让图标不显示，直到链接悬停在上面。我有几个问题：

1) Display: hidden在图标上不起作用。这正常吗？Visibility: hidden确实让它们消失了，但与可见性属性一样，它没有将它们从文档流中删除。

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

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

上述CSS的问题是，悬停在上面的整个div将显示心脏，这意味着我可以将鼠标悬停在不是链接的区域(图标所在的区域)上，图标将弹出，但不可点击。我只希望图标显示时，实际的链接是悬停。你知道怎么做吗？

具有完整html/css的Codepen (与问题相关的代码位于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

Answer 2

您应该使用display:none和display:block CSS规则而不是display:hidden。有些是这样的：

.main-nav__link {
    display:none;
}

.main-nav__link: hover {
    display:block;
}