当我将光标移动到 <nav> 中列表的不同元素上时,所有内容都变为粗体..
来源:http://htv2.tumblr.com
视频:http://quick.as/9gdcozz
nav {width:100%;height:70px;position:fixed;top:0;left:0;background:#0c1d37;z-index:999;} .title {margin:5px 50px;color:#fff;float:left;} .title h1 {font-family: 'Lobster', cursive;font-size:2em;line-height:1.4em;font-weight:normal;font-style:normal;padding-right:15px;} .title h2 {font-family: 'Open Sans Condensed', sans-serif;font-size:1.0em;font-weight:300;font-style:italic;margin-top:-32px;line-height:1.8em;} .menunav {font-family: 'Open Sans', sans-serif;font-size:0.9em;line-height:0.9em;font-weight:300;font-style:italic;text-transform:uppercase;position:relative;} .menunav ul {list-style-type:none;margin:0;padding:0;} .menunav ul li {display:inline-block;width:100px;height:70px;text-align:center;line-height:70px;cursor:pointer;} .menunav ul li:hover {background: rgba(255, 255, 255, 0.1);} .menunav a {font-weight:300;color:#fff;} .menunav ul li div.showmenav {display:none;} .menunav ul li.contacts:hover > div.showmenav {display:list-item;position:absolute;} .showmenav {background:#0c1d37;width:100px;overflow:visible;} ul.dropdown li {display:list-item;text-align:center;} div.menunav a:hover {text-decoration:none;}
<body>
<nav><div class="wrapmobile"><div class="title"><h1>{Title}</h1><br/>{block:Description}<h2>{Description}</h2>{/block:Description}</div></div>
<div class="menunav">
<ul>
<a href="/"><li class="home">Home</li></a>
<a href="/me"><li class="about">About</li></a>
<li class="contacts">Contacts
<div class="showmenav">
<ul class="dropdown">
<a href="http://twitter.com/"><li>Twitter</li></a>
<a href="/ask"><li>Ask</li></a>
<a href="/"><li>Skype</li></a>
</ul>
</div>
</li>
<li class="search"><a href="/archive">History</a></li>
</ul>
</div>
</nav>
</body>
最佳答案
将 anchor 标记放在列表项中,并尝试将 300 的字体粗细添加到 anchor 标记的悬停伪元素。您的 anchor 标记的字体粗细似乎设置为小于浏览器默认值 400,但悬停状态仍呈现浏览器默认值。
.menunav a:hover {font-weight:300;}
编辑:以上没有解决问题。然而,导航的固定定位似乎是introduce a bug。 .添加“-webkit-font-smoothing:抗锯齿;”到 body 或 html 标签将创建字体一致性。
关于html - 当光标悬停在下拉菜单按钮上时,文本会变成粗体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21223937/