我有一个网络应用程序(ASP.NET 2.0 C#)。在我的主页上,我有一个菜单控件,我使用CSS样式表来设置菜单的不同部分的样式。出于某种原因,当我将鼠标悬停在菜单上时,它会跳跃一点。我想当我将鼠标悬停在它上面时,边界会变得更大。
以下是整个菜单的样式:
.menu
{
width:110%;
height:25px;
border: 1px solid gray;
text-align:center;
}
继承我对StaticHoverStyle的风格:
.staticMenuHover
{
background-color:#CCCCCC;
border-style:solid;
border-color:#888888;
text-decoration: underline;
border-width:thin;
}
我不知道为什么会这样,有人可以帮忙吗?
由于
答案 0 :(得分:1)
悬停类的边框宽度设置为thin,在我的测试中呈现为2像素边框。将其设置为1px。
border-width:1px;
你也可以将第二个类的边界规则折叠成一行,使其与你的第一个类一致,如下所示:
border:1px solid #888888;
答案 1 :(得分:0)
这种情况正在发生,因为你正在强调你的文字。尝试没有文字装饰,我打赌它会解决你的问题。
答案 2 :(得分:0)
您始终可以为链接添加下划线(不是文本修饰)并调整填充。工作示例:
#menu ul li a {
display: block;
width: 95%;
padding: 0px 2px 2px 4px;
text-decoration: none;
color: rgb(30%,30%,60%); background: transparent;
}
#menu ul li a:visited {
color: rgb(50%,10%,100%);
}
#menu ul li a:hover {
color: #000;
border-bottom: 2px solid #c63;
background: #fcf;
padding-bottom: 0px; }
这项工作的原因是将2px底部填充更改为0 px并在相同规则中添加2px边框底部。颜色的变化与手头的问题无关。