html - 导航栏项目在悬停时变大?
问题描述
我对一些按钮进行了一些更改,现在我的导航栏项目在悬停时变得更大,这是一种不希望的行为。
将鼠标悬停在导航栏中的徽标上时,此行为更加明显。
代码笔:
https://codepen.io/anon/pen/jjEMZj
<nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-bg">
<a class="navbar-brand" href="/">  <img src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/stickers_gallito_logo.png" width="20px" height="30px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/stickers">Stickers <span class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/carrito_de_compras/"><i class="fas fa-shopping-cart"
style="color:white !important;"></i> ( 3)</a>
</li>
<li class="nav-item active">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"><i class="fas fa-user-circle"></i> ogonzales</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="/ordenes/historial_de_compras/" class="dropdown-item">Historial de compras</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="/salir/">Salir <i class="fas fa-sign-out-alt"></i></a>
</li>
</ul>
</div>
</nav>
解决方案
这是因为footer.css
第 38 行:
li.footer_nav_links a:focus, a:hover {
font-size: 12px;
color: rgb(2, 214, 158);
text-decoration: none;
}
摆脱font-size: 12px
那里,它会没事的。也许,您a:hover
以通用方式使用,因此<a>
在悬停时会影响所有标签。你的意思是li.footer_nav_links a:hover
?
li.footer_nav_links a:focus, li.footer_nav_links a:hover {
font-size: 12px;
color: rgb(2, 214, 158);
text-decoration: none;
}
推荐阅读
- python - Pandas 中的多列到单列
- xamarin - 如何将可观察集合绑定到 xamarin 中的 flexlayout?
- python - 如何对时间序列进行子采样,到 Django 中的每一行?
- reactjs - 如何使用 useState 挂钩设置初始状态
- amazon-web-services - AWS GLUE:使用 Pyspark 重命名结构内的字段名称
- email - 将新行添加到 SQL 表后是否可以发送电子邮件
- ios - 快速组合枚举
- javascript - 如何确保工作不会在 Bull 中运行两次?
- c# - 将 sp_MSForEachTable 与 SqlDataReader 一起使用
- jquery - 使用 Flex Box 将多个图像堆叠在一起