如何更改 :hover 在导航栏中的形状？答案

【问题标题】：How do I change the shape of a :hover in the navbar?如何更改 :hover 在导航栏中的形状？
【发布时间】：2018-09-19 16:47:20
【问题描述】：

我在导航栏社交图标上添加了透明悬停，但我不知道如何更改悬停的形状。目前看起来是这样的：

我希望悬停只出现在图标本身上，而不是其上方和下方的空间。

&lt;li id="menu-item-518" class="fb-icon menu-item menu-item-type-custom menu-item-object-custom menu-item-518"&gt;&lt;a title="Facebook" href="https://www.facebook.com/linkhere"&gt;Facebook&lt;/a&gt;&lt;/li&gt;

我的子主题的 CSS 目前是：

/* Social link hover colour */
.fb-icon.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-518 a:hover{
	background-color:transparent;
}

谢谢

【问题讨论】：

跟列表项的css有关。现在看起来列表项本身正在通过使用某个类转换为 facebook 图标。列表项的高度超出了图标本身。如果可能的话，我建议使用缩略图并直接定位它而不是列表项。

标签： html css wordpress wordpress-theming parent-child

【解决方案1】：

如果需要，请尝试删除 padding-top 和 padding-bottom 并用 margin-top 和 margin-bottom 替换它们。

所以可能是这样的：

.my-icon {
  padding-top: 0;
  padding-bottom: 0;
}

【讨论】：

啊，谢谢！因此，我接受了您更改填充的建议，并找到了具有填充的导航栏的代码并得到了这个： .navbar .navbar-nav > li > a { padding-top: 0px;填充底部：0px； } .nav>li>a { padding:0px 10px; } 谢谢！