如何在导航栏中更改a：hover的形状？

Posted 2021-04-07

我在导航栏社交图标上添加了一个透明的悬停，但我无法弄清楚如何改变悬停的形状。它目前看起来像这样：

我希望悬停只显示在图标本身上，而不是它上方和下方的空间。

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

我孩子主题的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;
}

谢谢

答案

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

也许是这样的：

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