Question

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

1）Display: hidden在图标上不起作用。那是正常的吗？ Visibility: hidden确实使它们消失了，但是与visible属性一样，它没有将它们从文档流中删除。

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;
}

图标字体显示和悬停

2 个答案: