悬停后如何保持div宽度？

Question

请问如何在悬停后保持div宽度？

这是HTML代码

<div>
<a href="/kcms1/The-Plant/Refining.aspx" style="white-space:nowrap; position:relative;"> Refining</a>
<a href="/kcms1/The-Plant/Products.aspx" style="white-space:nowrap; position:relative;"> Products</a>
<a href="/kcms1/The-Plant/Process.aspx" style="white-space:nowrap; position:relative;"> Process</a>
<a href="/kcms1/The-Plant/Quality-Assurance.aspx" style="white-space:nowrap; position:relative;"> Quality Assurance</a>
<a href="/kcms1/The-Plant/Safety.aspx" style="white-space:nowrap; position:relative;"> Safety</a>
</div>

======

请这是我的主菜单，宽度不固定，当鼠标悬停在（质量保证）主div上时，宽度增加约2像素。

我希望悬停是大胆的。

我用字母间距但不好:(

你可以在这里看到我的问题

Answer 1

目前，菜单的宽度由最宽的元素决定。

“Saudization and Training”是目前最广泛的元素，因此，当它以粗体显示时，通过扩展菜单的宽度来适应额外的宽度。这是因为粗体文本比标准文本更宽。

有没有理由不能修改菜单的宽度？

如果无法修正菜单的宽度 - 您可以选择另一种在悬停时突出显示所选元素的方法（下划线，是常见选项）。

请参阅此处的相关讨论：

Inline elements shifting when made bold on hover

Answer 2

尝试使用以下方式设置div样式溢出：

溢出：隐藏;

所以：

<div style="overflow:hidden;width:250px;height:200px;">
    content here

</div>

你需要设置一个宽度，如果你使用这个我相信所以也增加宽度（你可以设置你自己的宽度到你需要的）高度相同。

Answer 3

另一个想法是使用一些JavaScript来捕获菜单div上的mouseenter事件，获取div的outerWidth（），然后设置菜单div的最大宽度。悬停不会扩展此框。

var width = $this.outerWidth();
$(this).css({"max-width": width+"px"});

只需确保菜单项上的溢出设置为可见：

$("menu items").css({overflow: "visible"});

最好在mouseleave上清除max-width。

这对我很有用。