链接到网站
请参阅导航菜单中的社交媒体链接。 您会注意到，当您将鼠标悬停在导航菜单中的其他链接上时，它们的字体会更改颜色，但是当您将鼠标悬停在社交媒体链接上时，它们的背景填充会增加并转移到侧面 - 这不是我的意思想。 我想要的是当你将鼠标悬停在导航菜单（＃76abdc）上时，链接将填充与导航菜单中的其他链接相同的浅蓝色（＃76abdc）。 例如，Facebook图标中的“f”将填充＃76abdc，Twitter图标中的鸟将填充＃76abdc，而LinkedIn图标中的“in”也将填充＃76abdc。
我个人不知道这种风格是如何应用的（我没有开发这个部分的网站），但我确实知道它使用了字体很棒，当你强制a时你可以查看以下样式：将鼠标悬停在这些类上：
.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;但这实际上似乎增加了填充（???）
在Appearance - > 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; }Link To Website
Please see the social media links in the Nav Menu. You'll notice that when you hover over the other links in the Nav Menu, their font changes colors, but when you hover over the social media links, their background padding increases and they shift over to the side - this isn't what I want. All I want is for the links to fill with the same light blue color as the other links in the Nav Menu (#76abdc) as you hover over them. So for example, the "f" in the Facebook icon would be filled with #76abdc, the bird in the Twitter icon would be filled with #76abdc, and the "in" in the LinkedIn icon would also be filled with #76abdc.
I personally don't know how this style was applied (I didn't develop this part of the site), but I do know that it's using font-awesome and you can view the following styles when you force a:hover over these classes:
.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; }I had tried to get rid of the padding
padding: 2px 5px !important;But this actually seems to increase the padding (???)
In Appearance --> Widgets (this is a WordPress site, by the way), I can also see that the HTML for "Header Social Media" is as follows:
<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>Do I need to change anything here or over in the CSS? How? Thank you!
EDIT - Updated 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; }最满意答案
.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对社交链接padding: 0px !important为其提供保证金
.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;}Try removing the margin-right and add padding: 0px !important to the social links and give margin to it
更多推荐
发布评论