Question

Link To Website

请参阅导航菜单中的社交媒体链接。您会注意到，当您将鼠标悬停在导航菜单中的其他链接上时，它们的字体会更改颜色，但是当您将鼠标悬停在社交媒体链接上时，它们的背景填充会增加并转移到侧面 - 这不是我的意思想。我想要的是当你将鼠标悬停在导航菜单（＃76abdc）上时，链接用蓝色填充相同的浅蓝色。例如，Facebook图标中的“f”将填充＃76abdc，Twitter图标中的鸟将填充＃76abdc，而LinkedIn图标中的“in”也将填充＃76abdc。

我个人不知道这种风格是如何应用的（我没有开发网站的这一部分），但我确实知道它使用了字体很棒，你可以在强制a：hover时查看以下样式在这些课程上：

.secondary-navbar .navbar-nav > li > a:hover {
    background-color: #fff;
    border-radius: 5px;
    color: #1971b9;
    font-weight: bold;
    font-size: 120%;
    text-transform: uppercase;
    margin: 13px 12px 0; 
}

.secondary-navbar .social-links > li > a:hover, .secondary-navbar
.social-links > li > a:focus {
    margin: 13px 0 0 !important;
    padding: 2px 5px !important;
    background-color: #1971b9 !important;
    color: #fff!important;
    font-size: 180%!important;
    margin-right: -10px;
}

我曾试图摆脱填充

 padding: 2px 5px !important;

但这实际上似乎增加了填充（???）

外观 - ＆gt; Widgets（顺便说一句，这是一个WordPress网站），我还可以看到“Header Social Media”的HTML如下：

<ul class="nav navbar-nav navbar-right social-links hidden-xs hidden-
sm">
    <li>
        <a href="#">
        <i class="fa fa-facebook-square" aria-hidden="true"></i>
        </a>
    </li>

    <li>
        <a href="#">
        <i class="fa fa-twitter-square" aria-hidden="true"></i>
        </a>
    </li>

    <li>
        <a href="#">
        <i class="fa fa-linkedin-square" aria-hidden="true"></i>
        </a>
    </li>
</ul>

我是否需要在CSS中更改此处或更改？怎么样？谢谢！

编辑 - 更新了CSS：

.secondary-navbar .social-links > li > a {
    /*margin: 13px 0 0;*/
    margin: 13px 5px 0;
    padding: 2px 5px;
    background-color: #1a3664;
    color: #fff;
    font-size: 180%;
    /*margin-right:-10px;*/
    /*padding: 2px 5px !important;*/
    padding: 0px !important;

}

.secondary-navbar .social-links > li > a:hover ,
.secondary-navbar .social-links > li > a:focus {
    /*margin: 13px 0 0 !important;*/
    margin: 13px 5px 0!imporant;
    /*padding: 2px 5px !important;*/
    padding: 0px !important;
    background-color: #1971b9 !important;
    color: #fff!important;
    font-size: 180%!important;
    margin-right:-10px;
}

Answer 1

.secondary-navbar .social-links > li > a {
  margin: 13px 5px 0;
  padding: 2px 5px;
  background-color: #1a3664;
  color: #fff;
  font-size: 180%;
  /* margin-right: -10px; */
  padding: 0px !important;
}

and on hover social links 



.secondary-navbar .social-links > li > a:hover, .secondary-navbar   .social-links > li > a:focus {
    margin: 13px 5px 0 !important;
   padding: 0px !important;
  background-color: #1971b9 !important;
  color: #fff!important;
  font-size: 180%!important;
  margin-right: -10px;}

尝试删除margin-right并将padding: 0px !important添加到社交链接并为其添加边距

如何正确地设置社交媒体链接

1 个答案: