HTML/CSS当悬停链接样式斜体其他链接保持稳定

我有一个小问题，当我悬停菜单链接其他链接转移到侧面，但我需要我的其他链接将保持稳定。我该如何解决这个问题？HTML/CSS当悬停链接样式斜体其他链接保持稳定

HTML：

<div id="top"> 
    <a href="index.php?id=pagrindinis"><div id="logo"></div></a> 
    <div id="menu"> 
     <ul id="nav"> 
      <li><a href="index.php">Pagrindinis</a></li> 
      <li><a href="#">Taisyklės</a></li> 
      <li><a href="#">Pamokos</a></li> 
      <li><a href="#">Kontaktai</a></li> 
      <li><a href="#">Facebook</a></li> 
     </ul> 
    </div>

CSS：

#menu #nav { 
    font-family: Segoe UI, Arial, sans-serif; 
    font-size: 14px; 
    color: #FFFFFF; 
    list-style:none; 
} 

#menu #nav li { 
    display: inline-block; 
    padding: 0px 10px 0px 10px; 
} 

#menu #nav li a { 
    font-family: Segoe UI, Arial, sans-serif; 
    font-size: 14px; 
    color: #FFFFFF; 
    text-decoration: none; 
} 

#menu #nav li a:hover { 
    color: #0a813c; 
    font-style: italic; 
}

的jsfiddle：http://jsfiddle.net/nJgyn/1/

感谢您的帮助

来源

2013-03-27 user2204367

安置自己的** HTML **。或者制作一个[JSFiddle]（http://jsfiddle.net/）。 – Vucko 2013-03-27 09:41:27

如果你的'＃top'或'＃menu'具有固定的宽度，问题是当你的字体变成斜体时，会消耗更多的水平空间。你不能真正把CSS拿走。您可以将字体设置为较小的像素进行测试，但仍然不可靠。或者尝试'padding：0px 0px 0px 10px;'，在#menu #nav li上删除右边的填充。 – 2013-03-27 09:43:42

这是因为你的font-style:italic需要额外的空间。

您可以将一些固定的widht添加到li。

#menu #nav { 
    font-family: Segoe UI, Arial, sans-serif; 
    font-size: 14px; 
    color: #000; 
    list-style:none; 
} 

#menu #nav li { 
    display: inline-block; 
    padding: 0px 10px 0px 10px; 
    width:50px; /* some fixed width */ 
} 

#menu #nav li a { 
    font-family: Segoe UI, Arial, sans-serif; 
    font-size: 14px; 
    color: #000; 
    text-decoration: none; 
} 

#menu #nav li a:hover { 
    color: #0a813c; 
    font-style: italic; 
}

JSfiddle。

来源

2013-03-27 09:46:28 Vucko

@ user2204367您的欢迎。请参阅[JQuery .mouseout（）事件]（http://api.jquery.com/mouseover/）将多个函数绑定到_.mouseover（）_事件。 – Vucko 2013-03-27 10:03:03

#menu #nav li { 
display: inline-block; 
width: 100px; 
text-align: center; 
} 

#menu #nav { 
font-family: Segoe UI, Arial, sans-serif; 
font-size: 14px; 
color: white; 
list-style: none; 
padding: 0px; 
display: table;

}

来源

2013-03-27 09:57:03 Venugopal

这里是另一个解决方案，可以增加空间/ NBSP;一个标记后，它会修复斜体悬停错误：

的Html方式：

<a href="#">Link </a>
CSS法：

#menu #nav li a:after { content: "\0000a0"; }

来源

2013-07-20 20:28:51

HTML/CSS当悬停链接样式斜体其他链接保持稳定

回答

相关问题