将样式添加到活动链接?
嗨在我的网站website(密码:ebriff)我已经添加了小白色三角形作为图片到活动链接。但因为我有一张图片作为我的第一个菜单链接,所以不会添加到该图片中。我如何解决这个问题?将样式添加到活动链接?
CSS:
.top-menu li{
margin: 0;
float: left;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
color: #fff; /* text color */
font-size: 15px;
text-shadow: 0 1px 0 rgba(0,0,1,.5); /* drop shadow */
letter-spacing: 1px;
font-weight: 300;
}
li.top {
border-right: 1px solid #007472;
border-left: 1px solid #009C9A;
}
li.top:last-child {
border-right: none;
}
li.top:first-child {
width: 70px;
border-left: none;
background: url({{'home-icon.png'|asset_url}}) no-repeat 24px 25px;
text-indent: -9999px;
}
.current {
background: url({{'triangle.png'|asset_url}}) no-repeat center bottom}
}
你可以把家里图标,背景图片的链接,而不是列表项。至少这为我工作,当我在Chrome开发者工具试了一下;)的 所以不是
li.top:first-child {
width: 70px;
border-left: none;
background: url({{'home-icon.png'|asset_url}}) no-repeat 24px 25px;
text-indent: -9999px;
}
使用
li.top:first-child {
width: 70px;
border-left: none;
text-indent: -9999px;
}
li.top:first-child a{
background: url({{'home-icon.png'|asset_url}}) no-repeat 24px 25px;
}
您可以使用CSS3多背景
background: url(...), url(...);
,或者您可以手动创建带箭头的图像叠加在“正常的背景图标”,并用它为:活跃选择。 也考虑使用CSS sprites。
我试着添加这个: .current {0121} {{'home-icon.png'| asset_url}})重复24px 25px,background:url({{'triangle.png'| asset_url}})no-repeat center bottom}; } – McKeene 2013-03-20 22:28:04
但后来它停止了所有这些工作。但在同一时间,如果它的工作,主页图标也将被添加到所有不同的链接对吗? – McKeene 2013-03-20 22:29:12
在你的代码中,第二个后台声明_overwrites_是第一个而不是_adding_。请写:背景:网址(...)无重复24px 25px,网址(...)无重复中心底部; – 2013-03-20 22:32:13
这将是巨大的,如果你能告诉我们你的HTML了。 – Steve 2013-03-20 22:13:05
嗯......你确定在这个你不拥有或控制的公开网站中包含密码是安全的吗? – 2013-03-20 22:13:07
如果密码不敏感,并且稍后您将更改该密码,则该链接将会失效并且该问题将来无法使用。 – 2013-03-20 22:15:48