Question

我在尝试弄清楚如何使导航栏中的联系人链接更改为悬停时的信封图标时遇到问题。

Answer 1

有几种方法可以做到。一种是在按钮内有两个容器，一个用信封接触另一个容器。使用root->left隐藏信封，并将其悬停在按钮上，如下所示..

display: none;

* original-class - 您可能已经为您的li分配了一个课程。如果是这样，您可以使用css向标记添加多个类，只需在它们之间留一个空格即可。原始课程只是为了展示你已经拥有的课程，如果有的话。

Answer 2

您可以使用font-awesome cdn来显示信封图标。只需在<head>代码中添加此cdn样式表。

<link rel="stylesheet" href=""https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

见这个例子：

＆＃13;

a{
 text-align:center;  
  width:150px;
}
a .changeIconLink {
    display: block;
}
a .changeIconIcon {
    display: none;
}
a.changeIcon:hover .changeIconLink {
    display: none;
}
a.changeIcon:hover .changeIconIcon {
    display: block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
  <li>
    <a class="changeIcon">
        <span class="changeIconLink">contact</span>
        <span class="changeIconIcon"><i class="fa fa-envelope"></i></span>
    </a>
</nav>

＆＃13;

如何在导航栏上获取联系人链接以在悬停时更改为信封图标

2 个答案: