菜单链接旁边的图标CSS

嘿，我有一个或一个link 旁边的图标有点或麻烦所以首先我找不到我可以移动文本，以便图标显示正确，而不是在文本之下。其次是当您将文字悬停时，图标消失。菜单链接旁边的图标CSS

我做了一个脚本，所以你可以看看它 https://jsfiddle.net/8nxrwbog/

感谢您的帮助！

2016-12-04 Illus1on

请附上您的代码直接insted的只是链接到它。 –

#menu-bar { 
 
    width: 100%; 
 
    line-height: 40px; 
 
    position:relative; 
 
    z-index:999; 
 
} 
 
#menu-bar li { 
 
    background-color:black; 
 
    float: left; 
 
    position: relative; 
 
    list-style: none; 
 
} 
 
#menu-bar a { 
 
    font-weight: bold; 
 
    font-family: arial; 
 
    font-style: normal; 
 
    font-size: 12px; 
 
    color: #E7E5E5; 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 6px 10px 4px 10px; 
 
    margin: 0; 
 
} 
 
#menu-bar li ul li a { 
 
    margin: 0; 
 
} 
 
#menu-bar li:hover > a { 
 
\t background-color: #0083c2; 
 
    transition-delay: .1s; 
 
\t transition-duration: .8s; 
 
} 
 
#menu-bar .nav-button-home a { 
 
background:url("http://overnine.servergamers.net/3/images/icons/home20x20.png") no-repeat 0 13px; padding-left: 22px 
 
}

<ul id="menu-bar"> 
 
    <li class="nav-button-home"><a href="#">Home</a></li> 
 
    <li class="nav-button-home"><a href="#">Teams</a> 
 
    <li class="nav-button-home"><a href="#">Sponsors</a></li> 
 
    <li class="nav-button-home"><a href="#">WebTV</a></li> 
 
    <li class="nav-button-home"><a href="#">Contact</a></li> 
 
</ul>

对于未来移动文本到你的图标，你可以设置一个填充左为＃菜单栏.nav键式家

例如：padding- left：22px;

该图标消失，因为您将完整的背景更改为颜色。若要只更改背景的颜色，您必须在＃menu-bar li中将'background'更改为'background-color'：hover> a.-c

来源

2016-12-04 13:10:05

我认为我尝试了一切免除。谢谢，你有没有想过这个图标不会消失？ – Illus1on

将背景更改为＃menu-bar li：hover> a中的背景色。 –

您需要向您的链接添加填充，如下所示：

#menu-bar .nav-button-home a { 
    background:url("http://overnine.servergamers.net/3/images/icons/home20x20.png") no-repeat 0 13px; 
    padding: 0 40px 0 25px; 
    }

您的悬停效果将覆盖背景图像。您可以确保图像将它添加到悬停效果，这样在那里停留：

#menu-bar li:hover > a { 
    background-color: #0083c2; 
    background-image:url("http://overnine.servergamers.net/3/images/icons/home20x20.png") no-repeat 0 13px; 
    transition-delay: .1s; 
    transition-duration: .8s; 
}

小提琴：https://jsfiddle.net/xxx90hva

来源

2016-12-04 13:15:18 sol

，以防止文本和图像重叠，你可以给填充左为“＃菜单栏一个“

我padding-left: 24px似乎确定

现在图像上悬停消失，因为这段代码的

#menu-bar li:hover > a { 
background: #0083c2; 
transition-delay: .1s; 
transition-duration: .8s; 
}

当您更改background属性...它实际上覆盖了background-image属性..为什么？

读到这里https://developer.mozilla.org/en/docs/Web/CSS/background

所以将其更改为background-color，它应该是罚款。

来源

2016-12-04 13:16:22

谢谢！它非常完美，现在非常感谢 – Illus1on

您需要增加链接的左边距，并且对于：悬停只定义背景色：Fiddle。

此外，我在链接的两侧添加了更多的间距，也许看起来更适合你。

#menu-bar a { 
    font-weight: bold; 
    font-family: arial; 
    font-style: normal; 
    font-size: 12px; 
    color: #E7E5E5; 
    text-decoration: none; 
    display: block; 
    padding: 6px 20px 4px 35px; 
    margin: 0; 
} 
#menu-bar li:hover > a { 
    background-color: #0083c2; 
    transition-delay: .1s; 
    transition-duration: .8s; 
}

来源

2016-12-04 13:18:15

如果增加填充左侧，应该在列表项未被悬停时修复可见性问题。我给出的建议是使用Font Awesome而不是图像，但可以像文本一样操作它，但它是一个图标。要查看它，请点击此处，它会提供您需要的所有信息：http://fontawesome.io/。

来源

2016-12-04 13:32:34 Lunafairy783

您添加图标为背景尝试通过标签将其添加

它应该工作：

<ul id="menu-bar"> 
       <li class="nav-button-home"><a href="#"><img class="img" src="http://overnine.servergamers.net/3/images/icons/home20x20.png" /><em class="test">Home</em></a></li> 
       <li class="nav-button-home"><a href="#">Teams</a> 
       <li class="nav-button-home"><a href="#">Sponsors</a></li> 
       <li class="nav-button-home"><a href="#">WebTV</a></li> 
       <li class="nav-button-home"><a href="#">Contact</a></li> 
       </ul>

和CSS：

#menu-bar { 
    width: 100%; 
    line-height: 40px; 
    position:relative; 
    z-index:999; 
} 
#menu-bar li { 
    background-color:black; 
    float: left; 
    position: relative; 
    list-style: none; 
} 
#menu-bar a { 
    font-weight: bold; 
    font-family: arial; 
    font-style: normal; 
    font-size: 12px; 
    color: #E7E5E5; 
    text-decoration: none; 
    display: block; 
    padding: 6px 10px 4px 10px; 
    margin: 0; 
} 
#menu-bar li ul li a { 
    margin: 0; 
} 
#menu-bar li:hover .img { 
    visibility: hidden; 
} 
#menu-bar .nav-button-home a { 
    padding: 10px; 

} 
.test { 
    padding: 5px 10px; 

}

可以调整填充;）

来源

2016-12-04 14:11:42 miftari0

使用以下代码进行css

#menu-bar { 
    width: 100%; 
    line-height: 40px; 
    position:relative; 
    z-index:999; 
} 
#menu-bar li { 
    background-color:black; 
    float: left; 
    position: relative; 
    list-style: none; 
    /*padding-left:5px; 
    padding-right:5px;*/ 
} 
#menu-bar a { 
    font-weight: bold; 
    font-family: arial; 
    font-style: normal; 
    font-size: 12px; 
    color: #E7E5E5; 
    text-decoration: none; 
    display: block; 
    padding: 6px 10px 4px 25px; 
    margin: 0; 
} 
#menu-bar li ul li a { 
    margin: 0; 
} 
#menu-bar li:hover > a { 
    background-color: #0083c2; 
    transition-delay: .1s; 
    transition-duration: .8s; 
} 
#menu-bar .nav-button-home a { 
background:url("http://overnine.servergamers.net/3/images/icons/home20x20.png") no-repeat 0 13px; 
}

使用此代码对你的HTML

<ul id="menu-bar"> 
<li class="nav-button-home"><a href="#">Home</a></li> 
<li class="nav-button-home"><a href="#">Teams</a> 
<li class="nav-button-home"><a href="#">Sponsors</a></li> 
<li class="nav-button-home"><a href="#">WebTV</a></li> 
<li class="nav-button-home"><a href="#">Contact</a></li> 
</ul>

来源

2016-12-04 15:50:16

菜单链接旁边的图标CSS

回答

相关问题