hover - 悬停后如何保持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”是目前最宽的元素，因此，当它是粗体字时，通过扩展菜单的宽度来容纳额外的宽度。这是因为粗体文本比标准文本更宽。

是否有无法修复菜单宽度的原因？

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

请参阅此处的相关讨论：

悬停时加粗时内联元素移动

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。

这对我很有用。