html - Iconfont 显示和悬停

问题描述

我的页面底部有五个链接。每个链接旁边都有<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 的 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>

标签： htmlcss

html - Iconfont 显示和悬停

问题描述

解决方案

推荐阅读