Question

我正在使用自适应菜单。 font-weight已设置为正常。但是在鼠标悬停时，我将font-weight更改为粗体/斜体。这就是菜单大小变化的原因。

我该如何防止这种情况？

div.menu a span {        
    color: #000000;    
    display: block;    
    font-size: 14px;    
    padding:5px 0;  
}

鼠标悬停时：

div.menu a span:hover {    
    color: #FFF; 
    cursor: pointer; 
    font-weight:bold;
    font-size: 14px;
    padding:5px 0;
}

JS小提琴here

Answer 1

在 div.menu a span:hover { } 中移除 font-size: 14px 属性， div.menu a span{ } 添加 { {1}} css属性可以解决此问题。

line-height

Answer 2

您无需在hover模式中指定font-size，因为它将从div.menu a span继承。

接下来，如果您可以将行高属性添加到div.menu a span {块，则可以解决调整大小的问题。

div.menu a span {        
    color: #000000;    
    display: block;    
    font-size: 14px;    
    padding:20px;  
    float: left;
    width: auto; // you can have fixed width also
}

div.menu a span:hover {    
    color: #FFF; 
    cursor: pointer; 
    font-weight:bold;

}

工作演示：JSFIDDLE

鼠标悬停时菜单不应移动。位置应该是固定的

2 个答案: