我使用HTML列表和CSS创建了一个水平菜单。除非您将鼠标悬停在链接上,否则一切都会正常工作。你看,我为链接创建了一个大胆的悬停状态,现在由于大胆的大小差异,菜单链接发生了变化。
我遇到了与this SitePoint post相同的问题。但是,该帖子没有适当的解决方案。我到处寻找解决方案而找不到解决方案。当然,我不可能是唯一一个试图这样做的人。
有没有人有任何想法?
P.S:我不知道菜单项中文本的宽度,所以我不能只设置li项的宽度。
.nav { margin: 0; padding: 0; }
.nav li {
list-style: none;
display: inline;
border-left: #ffffff 1px solid;
}
.nav li a:link, .nav li a:visited {
text-decoration: none;
color: #000;
margin-left: 8px;
margin-right: 5px;
}
.nav li a:hover{
text-decoration: none;
font-weight: bold;
}
.nav li.first { border: none; }
<ul class="nav">
<li class="first"><a href="#">item 0</a></li>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
li {
display: inline-block;
font-size: 0;
}
li a {
display:inline-block;
text-align:center;
font: normal 16px Arial;
text-transform: uppercase;
}
a:hover {
font-weight:bold;
}
a::after {
display: block;
content: attr(title);
font-weight: bold;
height: 0;
overflow: hidden;
visibility: hidden;
}
<ul>
<li><a href="#" title="height">height</a></li>
<li><a href="#" title="icon">icon</a></li>
<li><a href="#" title="left">left</a></li>
<li><a href="#" title="letter-spacing">letter-spacing</a></li>
<li><a href="#" title="line-height">line-height</a></li>
</ul>
查看JSfiddle上的工作示例。我们的想法是在:hover
伪元素中为粗体(或任何:after
状态样式)内容保留空间,并使用标题标记作为内容的来源。
我建议不要在悬停时切换字体(°)。在这种情况下,它只是菜单项移动了一点,但我已经看到整个段落被重新格式化的情况,因为加宽导致额外的自动换行。当你做的唯一事情是移动光标时,你不希望看到这种情况发生;如果你不做任何事情,页面布局不应该改变。
在正常和斜体之间切换时也会发生这种转变。如果你在文本下方有空间,我会尝试更改颜色,或切换下划线。 (下划线应从底部边界保持清晰)
如果我在表单设计课程中使用切换字体,我会很高兴:-)
(°)单词font经常被滥用。 “Verdana”是一种字体,“Verdana normal”和“Verdana bold”是同一字体的不同字体。
您可以使用“保证金”属性:
li a {
margin: 0px 5px 0px 5px;
}
li a:hover {
margin: 0;
font-weight: bold;
}
只需确保左右边距足够大,以便额外的空间可以包含粗体文本。对于长话,您可以选择不同的边距。这只是另一种解决方法,但为我做的工作。
我喜欢使用文字阴影。特别是因为您可以使用过渡来为文本阴影设置动画。
你真正需要的是:
a {
transition: text-shadow 1s;
}
a:hover {
text-shadow: 1px 0 black;
}
如需完整导航,请查看此jsfiddle:https://jsfiddle.net/831r3yrb/
浏览器支持和有关text-shadow的更多信息:http://www.w3schools.com/cssref/css3_pr_text-shadow.asp
这是我更喜欢的解决方案。它需要一些JS,但你不需要你的title属性完全相同,你的CSS可以保持非常简单。
$('ul a').each(function() {
$(this).css({
'padding-left': 0,
'padding-right': 0,
'width': $(this).outerWidth()
});
});
li, a { display: inline-block; }
a {
padding-left: 10px;
padding-right: 10px;
text-align: center; /* optional, smoother */
}
a:hover { font-weight: bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
那这个呢?一个javascript - CSS3免费解决方案。
http://jsfiddle.net/u1aks77x/1/
ul{}
li{float:left; list-style-type:none; }
a{position:relative; padding-right: 10px; text-decoration:none;}
a > .l1{}
a:hover > .l1{visibility:hidden;}
a:hover > .l2{display:inline;}
a > .l2{position: absolute; left:0; font-weight:bold; display:none;}
<ul>
<li><a href="/" title="Home"><span class="l1">Home</span><span class="l2">Home</span></a></li>
<li><a href="/" title="Contact"><span class="l1">Contact</span><span class="l2">Contact</span></a></li>
<li><a href="/" title="Sitemap"><span class="l1">Sitemap</span><span class="l2">Sitemap</span></a></li>
</ul>
不是很优雅的解决方案,但“有效”:
a
{
color: #fff;
}
a:hover
{
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
我结合了上面的一些技术来提供一些不完全被js关闭的东西,并且使用一些jQuery更好。既然浏览器支持亚像素字母间距正在改进,那么使用它真的很不错。
jQuery(document).ready(function($) {
$('.nav a').each(function(){
$(this).clone().addClass('hoverclone').fadeTo(0,0).insertAfter($(this));
var regular = $(this);
var hoverclone = $(this).next('.hoverclone');
regular.parent().not('.current_page_item').hover(function(){
regular.filter(':not(:animated)').fadeTo(200,0);
hoverclone.fadeTo(150,1);
}, function(){
regular.fadeTo(150,1);
hoverclone.filter(':not(:animated)').fadeTo(250,0);
});
});
});
ul {
font:normal 20px Arial;
text-align: center;
}
li, a {
display:inline-block;
text-align:center;
}
a {
padding:4px 8px;
text-decoration:none;
color: #555;
}
.nav a {
letter-spacing: 0.53px; /* adjust this value per font */
}
.nav .current_page_item a,
.nav a:hover {
font-weight: bold;
letter-spacing: 0px;
}
.nav li {
position: relative;
}
.nav a.hoverclone {
position: absolute;
top:0;
left: 0;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li class="current_page_item"><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
ul {
list-style-marker: none;
padding: 0;
}
li {
display: inline-block;
}
li + li {
margin-left: 1em;
}
a {
display: block;
position: relative;
text-align: center;
}
a:before, a:after {
content: attr(aria-label);
text-decoration: inherit;
}
a:before {
font-weight: bold;
visibility: hidden;
}
a:after {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
a:hover:before {
visibility: visible;
}
a:hover:after {
display: none;
}
<ul>
<li>
<a href="" aria-label="Long-long-long"></a>
</li><li>
<a href="" aria-label="or"></a>
</li><li>
<a href="" aria-label="Short"></a>
</li><li>
<a href="" aria-label="Links"></a>
</li><li>
<a href="" aria-label="Here"></a>
</li>
</ul>
我使用文本阴影解决方案,就像其他人提到的那样:
text-shadow: 0 0 0.01px;
不同之处在于我没有指定阴影颜色,因此这种解决方案适用于所有字体颜色。
另一种方法是通过文本阴影“模拟”粗体文本。这有奖金(/ malus,取决于你的情况)也适用于字体图标。
nav li a:hover {
text-decoration: none;
text-shadow: 0 0 1px; /* "bold" */
}
有点hacky,虽然它可以避免重复文本(如果它很多很有用,就像我的情况一样)。
一个妥协的解决方案是使用文本阴影伪造粗体,例如:
text-shadow:0 0 0.01px black;
为了更好地比较,我创建了以下示例
a, li {
color: black;
text-decoration: none;
font: 18px sans-serif;
letter-spacing: 0.03em;
}
li {
display: inline-block;
margin-right: 20px;
color: gray;
font-size: 0.7em;
}
.bold-x1 a.hover:hover,
.bold-x1 a:not(.hover) {
text-shadow: 0 0 .01px black;
}
.bold-x2 a.hover:hover,
.bold-x2 a:not(.hover){
text-shadow: 0 0 .01px black, 0 0 .01px black;
}
.bold-x3 a.hover:hover,
.bold-x3 a:not(.hover){
text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px black;
}
.bold-native a.hover:hover,
.bold-native a:not(.hover){
font-weight: bold;
}
.bold-native li:nth-child(4),
.bold-native li:nth-child(5){
margin-left: -6px;
letter-spacing: 0.01em;
}
<ul class="bold-x1">
<li><a class="hover" href="#">Home</a></li>
<li><a class="hover" href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li>Bold (text-shadow x1)</li>
</ul>
<ul class="bold-x2">
<li><a class="hover" href="#">Home</a></li>
<li><a class="hover" href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li>Extra Bold (text-shadow x2)</li>
</ul>
<ul class="bold-native">
<li><a class="hover" href="#">Home</a></li>
<li><a class="hover" href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li>Bold (native)</li>
</ul>
<ul class="bold-x3">
<li><a class="hover" href="#">Home</a></li>
<li><a class="hover" href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li>Black (text-shadow x3)</li>
</ul>
传递到text-shadow
blur-radius
真正的低价值将使模糊效果不那么明显。
一般来说,重复text-shadow
越多你的文本将得到更大胆但同时失去字母的原始形状。
我应该警告你,将blur-radius
设置为分数并不会在所有浏览器中呈现相同的效果!例如,Safari需要更大的值才能以与Chrome相同的方式呈现它。
最好使用:: before而不是a :: after,如下所示:
.breadcrumb {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.breadcrumb li,
.breadcrumb li a {
display: inline-block;
}
.breadcrumb li:not(:last-child)::after {
content: '>'; /* or anything else */
display: inline-block;
}
.breadcrumb a:hover {
font-weight: bold;
}
.breadcrumb a::before {
display: block;
content: attr(data-label);
font-weight: bold;
height: 0;
overflow: hidden;
visibility: hidden;
}
<ul class="breadcrumb">
<li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li>
<li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li>
<li><a data-label="three" href="#">three</a></li>
</ul>
有关更多详细信息:https://jsfiddle.net/r25foavy/
如果您不反对使用Javascript,则可以在显示页面后设置适当的宽度。这是我如何做到的(使用Prototype):
$$('ul.nav li').each(this.setProperWidth);
setProperWidth: function(li)
{
// Prototype's getWidth() includes padding, so we
// have to subtract that when we set the width.
var paddingLeft = li.getStyle('padding-left'),
paddingRight = li.getStyle('padding-right');
// Cut out the 'px' at the end of each padding
paddingLeft = paddingLeft.substring(0,paddingLeft.length-2);
paddingRight = paddingRight.substring(0,paddingRight.length-2);
// Make the li bold, set the width, then unbold it
li.setStyle({ fontWeight: 'bold' });
li.setStyle({ width: (li.getWidth() - paddingLeft - paddingRight) + 'px'});
li.setStyle({ fontWeight: 'normal', textAlign: 'center' });
}
当有人告诉你在有问题的简单解决方案时不要那样做时,我真的无法忍受。我不确定li元素,但我只是解决了同样的问题。我有一个由div标签组成的菜单。
只需将div标记设置为“display:inline-block”即可。内联使它们彼此相邻并阻挡,您可以设置宽度。只需将宽度设置得足够宽,以适应粗体文本并使文本中心对齐。
(注意:它似乎剥离了我的html [下面],但是每个菜单项都有一个div标签,周围有相应的ID和类名SearchBar_Cateogory。即:<div id="ROS_SearchSermons" class="SearchBar_Category">
HTML(我在每个菜单项周围都有锚标签,但我无法将它们作为新用户提交)
<div id="ROS_SearchSermons" class="SearchBar_Cateogry bold">Sermons</div>|
<div id="ROS_SearchIllustrations" class="SearchBar_Cateogry">Illustrations</div>|
<div id="ROS_SearchVideos" class="SearchBar_Cateogry">Videos</div>|
<div id="ROS_SearchPowerPoints" class="SearchBar_Cateogry">PowerPoints</div>|
<div id="ROS_SearchScripture" class="SearchBar_Cateogry">Scripture</div>|
CSS:
#ROS_SearchSermons { width: 75px; }
#ROS_SearchIllustrations { width: 90px; }
#ROS_SearchVideos { width: 55px; }
#ROS_SearchPowerPoints { width: 90px; }
#ROS_SearchScripture { width: 70px; }
.SearchBar_Cateogry
{
display: inline-block;
text-align:center;
}
试试这个:
.nav {
font-family: monospace;
}
如果粗体文本比常规文本宽,也可以尝试负边距。 (并非总是如此)因此,我们的想法是使用类来设置:悬停状态。
jQuery的:
$(".nav-main .navbar-collapse > ul > li > a").hover(function() {
var originalWidth = $(this).outerWidth();
$(this).parent().addClass("hover");
$(this).css({
"margin-left": -(($(this).outerWidth() - originalWidth) / 2),
"margin-right": -(($(this).outerWidth() - originalWidth) / 2)
});
},
function() {
$(this).removeAttr("style");
$(this).parent().removeClass("hover");
});
CSS:
ul > li > a {
font-style: normal;
}
ul > li > a.hover {
font-style: bold;
}
我希望我能帮忙!
如果您无法设置宽度,则表示宽度将随着文本变为粗体而更改。除了通过修改每个状态的填充/边距等妥协之外,没有办法避免这种情况。
另一个想法是使用letter-spacing
a {
letter-spacing: 0.05px
}
a:hover, a:focus {
font-weight: bold;
letter-spacing: 0
}
jquery中的一行:
$('ul.nav li a').each(function(){
$(this).parent().width($(this).width() + 4);
});
编辑:虽然这可以带来解决方案,但应该提到它不能与原始帖子中的代码一起使用。 “display:inline”必须替换为浮动参数,以使宽度设置生效并使水平菜单按预期工作。
你可以用类似的东西
<ul>
<li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>
然后在你的CSS中,只需将span内容设置为粗体,并使用visibility:hidden来隐藏它,以便保持其尺寸。然后,您可以调整以下元素的边距以使其适合。
我不确定这种方法是否适合SEO。
我刚用“影子”解决方案解决了这个问题。这似乎是最简单有效的。
nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
text-shadow:0 0 1px white;
}
不需要重复三次阴影(结果对我来说是一样的)。
想分享一个没人在这里建议的不同解决方案。有一个名为text-stroke
的房产,对此非常方便。
p span:hover {
-webkit-text-stroke: 1px black;
}
<p>Some stuff, <span>hover this,</span> it's cool</p>
在这里,我瞄准span
标签内的文本,我们用black
像素来描边,它将模拟特定文本的bold
样式。
请注意,此属性目前尚未广泛支持(在撰写此答案时),只有Chrome和Firefox似乎支持此功能。有关text-stroke
的浏览器支持的更多信息,请参阅CanIUse。
只是为了分享一些额外的东西,你可以使用-webkit-text-stroke-width: 1px;
如果你不想为你的中风设置color
。
我有一个与你相似的问题。当我将鼠标悬停在它们上面时,我希望我的链接变得大胆,但不仅在菜单中,而且在文本中。正如你猜测的那样,这将是一个真正的家务活,可以找出所有不同的宽度。解决方案非常简单:
创建一个包含粗体链接文本的框,但其背景颜色与您上面的真实链接相同。这是我页面上的一个例子:
CSS:
.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }
当然,您需要将#FFFFE0替换为页面的背景颜色。 z-indices似乎不是必需的,但无论如何我都把它们放在一起(因为“hyp”元素将出现在HTML-Code中的“hyper”元素之后)。现在,要在您的页面上添加链接,请包含以下内容:
HTML:
You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>
第二个“此处”将隐藏并隐藏在您的链接下方。由于这是一个以粗体显示链接文本的静态框,因此在将鼠标悬停在链接上之前,文本的其余部分不会再移动。
希望我能够帮助:)。
太长