Question

我正在尝试设置四个Font Awesome图标，但是当我将它们的高度和宽度降至10px以下时，它会出现悬停状态。

目标是让它们以白色显示并具有悬停效果，将图标更改为红色并带有白色背景。想法？

如果它有帮助，我将它放在一个自举导航中。此外，如果您对最新的Bootstrap感到满意，我似乎无法将导航栏覆盖在Bootstrap Carousel的顶部而是将Carousel向下推。

CSS

#socialnav .fa {
font-size: 1em;
color: #ffffff;
width:10px;
height:10px;
text-align:center;
padding: 5px;
transition:all 0.4s ease-in-out;
}

#socialnav .fa:hover {
color: #c9001f;
background-color: #ffffff;
}

HTML

<section id="socialnav">
    <nav class="navbar navbar-toggleable-sm navbar-inverse">
        <div class="navbar-collapse collapse" id="navigation">
            <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a>
                </li>
            </ul>
        </div>
    </nav>
</section>

Answer 1

将高度和宽度设置为相对值，您不希望将静态高度和宽度设置为图标，否则背景的高度和宽度将精确为10像素。查看我的codepen以获得一个工作示例：https://codepen.io/anon/pen/QgPboZ?editors=1111

#socialnav .fa {
	font-size: 1em;
	color: #ffffff;
	width: relative;
	height: relative;
	text-align: center;
	padding: 5px;
	transition: all 0.4s ease-in-out;
}

#socialnav .fa:hover {
	color: #c9001f;
	background-color: #ffffff;
}

<section id="socialnav">
 <nav class="navbar navbar-toggleable-sm navbar-inverse">
  <div class="navbar-collapse collapse" id="navigation">
   <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
    <li class="nav-item">
     <a class="nav-link" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
    </li>
    <li class="nav-item">
     <a class="nav-link" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
    </li>
    <li class="nav-item">
     <a class="nav-link" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
    </li>
    <li class="nav-item">
     <a class="nav-link" href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a>
    </li>
   </ul>
  </div>
 </nav>
</section>

字体真棒造型

1 个答案: