内联元素在hover时变为粗体

我使用HTML列表和CSS创build了一个水平菜单。 除了将鼠标hover在链接上以外，其他所有function都可以正常工作。 你看，我为链接创build了一个大胆的hover状态，现在菜单链接因为大小的不同而变化。

我遇到与此SitePointpost相同的问题。 但是，这个职位没有适当的解决办法。 我到处寻找解决scheme，找不到一个解决scheme。 当然，我不能成为唯一一个试图做到这一点的人。

有没有人有任何想法？

PS：我不知道菜单项中文本的宽度，所以我不能只设置li项目的宽度。

这是我的代码：

HTML：

<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> 

CSS：

 .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: #ffffff; margin-left: 8px; margin-right: 5px; } .nav li a:hover{ text-decoration: none; font-weight: bold; } .nav li.first { border: none; } 

Answer 1

 li, a { display:inline-block; text-align:center; font: normal 14px Open Sans; 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> 

Answer 2

如果你不能设置宽度，那么这意味着宽度将随着文本变粗而改变。 没有办法避免这种情况，除了妥协之外，例如修改每个状态的填充/边距。

Answer 3

一个妥协的解决scheme是用文本阴影来粗体显示，例如：

 a:hover{ text-shadow:0 0 1px black, 0 0 1px black, 0 0 1px black } 

重复3次阴影使其看起来不那么模糊。

Answer 4

在jQuery中的一行：

 $('ul.nav li a').each(function(){ $(this).parent().width($(this).width() + 4); }); 

编辑：虽然这可以带来解决scheme，但应该提到，它不能与原始文章中的代码结合使用。 “display：inline”必须被浮动参数所替代，以使宽度设置有效并且水平菜单按预期工作。

Answer 5

另一个想法是使用letter-spacing

 a { letter-spacing: 0.05px } a:hover, a:focus { font-weight: bold; letter-spacing: 0 } 

Answer 6

你可以使用一些像

 <ul> <li><a href="#">Some text<span><br />Some text</span></a></li> </ul> 

然后在你的CSS只需设置跨度内容粗体和隐藏它的可见性：隐藏，以便它保持其尺寸。 然后，您可以调整以下元素的边距以使其适合。

我不知道这种方法是否是SEO友好的。

Answer 7

我刚刚解决了“阴影”解决scheme的问题。 这似乎是最简单有效的。

 nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a { text-shadow:0 0 1px white; } 

没有必要重复三次阴影（结果对我来说是一样的）。

Answer 8

我会build议在hover时切换字体（°）。 在这种情况下，只是菜单项移动了一些，但我已经看到了整个段落被重新格式化的情况，因为扩大会导致额外的文字换行。 当您唯一要做的就是移动光标时，您不希望看到这种情况。 如果你不做任何事情，页面布局不应该改变。

在正常和斜体之间切换时也可能发生转换。 我会尝试改变颜色，或切换下划线，如果你有文字下面的空间。 （下划线应该从底部边界保持清晰）

我会boo'd，如果我使用切换字体为我的表单devise类:-)

（°）字体经常被滥用。 “Verdana”是一种字体 ，“Verdana normal”和“Verdana bold”是相同字体的不同字体。

Answer 9

我有一个类似于你的问题。 当你将鼠标hover在它们上面的时候，我希望我的链接变得粗体，而不仅仅是在菜单中，而且在文本中。 正如你猜测，这将是一个真正的琐事，找出所有不同的宽度。 解决scheme非常简单：

创build一个框，其中包含的链接文本用粗体显示，但是像背景一样上色，但是上面有真实的链接。 这里是我的页面的一个例子：

CSS：

 .hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; } .hyper { position: absolute; z-index: 1; } 

当然，你需要用页面的背景颜色replace＃FFFFE0。 z-indices似乎不是必须的，但是我把它们放在了一起（因为“hypo”元素会出现在HTML代码中的“hyper”元素之后）。 现在，要在您的页面上添加链接，请添加以下内容：

HTML：

 You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span> 

第二个“这里”将隐藏在您的链接下方。 由于这是一个以粗体显示链接文本的静态框，所以文本的其余部分将不会再移动，因为在将鼠标hover在链接上之前，它已经移动了。

希望我能够帮助:)。

太长

Answer 10

您可以使用“保证金”属性：

 li a { margin: 0px 5px 0px 5px; } li a:hover { margin: 0; font-weight: bold; } 

只要确保左右边距足够大，额外的空间就可以包含粗体文本。 长话说，你可能会select不同的利润率。 这只是另一个解决方法，但为我做的工作。

Answer 11

CSS3解决scheme – 实验

（假冒胆）

想到分享一个不同的解决scheme，这里没有人build议。 有一个属性称为text-stroke这将是方便的。

 p span:hover { -webkit-text-stroke: 1px black; } 

 <p>Some stuff, <span>hover this,</span> it's cool</p> 

Answer 12

如果您不反对使用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' }); } 

Answer 13

这是我更喜欢的解决scheme。 它需要一点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> 

Answer 14

那这个呢？ 一个JavaScript – CSS3免费的解决scheme。

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> 

Answer 15

我喜欢用文字阴影代替。 特别是因为你可以使用转换animation文字阴影。

你真正需要的是：

 a { transition: text-shadow 1s; } a:hover { text-shadow: 1px 0 black; } 

为完整的导航检查出这个jsfiddle： https ：//jsfiddle.net/831r3yrb/

浏览器支持和更多信息文本阴影： http : //www.w3schools.com/cssref/css3_pr_text-shadow.asp

Answer 16

不是很优雅的解决scheme，但“作品”：

 a { color: #fff; } a:hover { text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; } 

Answer 17

我已经把上面的一些技巧结合起来，提供了一些与jsclosures并不完全相关的东西，甚至更好一些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> 

Answer 18

 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> 

Answer 19

当有人告诉你，当问题简单的解决scheme时，不要这样做，我真的无法忍受。 我不知道李元素，但我只是解决了同样的问题。 我有一个由div标签组成的菜单。

只需将div标签设置为“display：inline-block”即可。 内联，所以他们坐在一起，阻止你可以设置一个宽度。 只需将宽度设置得足够宽，以适应粗体文本并使文本中心alignment。

（注意：这似乎是剥离我的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; } 

Answer 20

如果粗体文本比普通文本宽，则也可以尝试使用负边距。 （并不总是）所以这个想法是用类来代替：hover状态。

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; } 

我希望我能帮上忙

Answer 21

这里是一个jQuery插件的想法：

 for all of the elements that you want bold mouse-over: - on mouseover: - calculate the width W and center C of the element - copy the element and hide the original with visibility:hidden (so it still takes up the same space) - make the text of the copied element bold and calculate the new width W2 - position the element absolute left at C-(W2/2) 

你可以很容易地扩展这个高度，使得可以稍微增加鼠标hover的字体大小，而不必担心跳跃的内容。