如何避免悬停时div宽度增加答案

【问题标题】：How to avoid div width increase on hover如何避免悬停时div宽度增加
【发布时间】：2013-03-25 14:35:36
【问题描述】：

div 包含单行文本作为 li 元素 div 宽度由最宽的项目宽度决定。如果鼠标悬停在某个项目上，其字体样式会变为粗体。

如果将鼠标悬停在宽项目上，粗体字体会导致宽度增加，这也会导致 div 宽度增加。如果鼠标在列表中移动，这看起来很丑陋。如何在不使用硬编码宽度的情况下禁用这种增加？

我尝试了溢出：隐藏样式如下代码所示，但 div 宽度仍然增加。

html:

<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li><a href="/details?product=1">Product1</a></li>
<li><a href="/details?product=2">Product2</a></li>
...

css:

.site-leftpane {
    background-color: #FBFBFB;
    clear: left;
    color: Black;
    float: left;
    margin: 0;
    overflow: hidden;
    padding-top: 1em;
}

.tree {
    line-height: 1.6em;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.tree li a {
    color: #333333;
    cursor: default;
    display: block;
    font-family: "arial","sans-serif";
    margin: 0;
}

.tree li:first-child {
    font-weight: bold;
}

.tree li a:hover {
    color: #E47911 !important;
    font-weight: bold;
}

更新

我根据建议的答案改变了风格

.tree li a {
    color: #333333;
    cursor: default;
    display: block;
    font-family: "arial","sans-serif";
    margin: 0;
}

但问题仍然存在。网页可以在不同的屏幕分辨率下使用。文本由客户在运行时创建。右侧包含自动使用剩余空间的其他 div。在这种情况下，我不知道如何使用硬编码的最大宽度。 max-width 指定允许的最大 div 宽度。通常在这种情况下 div 宽度较小，hover 会导致其增加，因此 max-width 不能解决问题。

【问题讨论】：

与this one 类似的问题。我特别喜欢 Thorgeir 对这个问题的解答。
谢谢。我尝试了 Thorgeir 的解决方案，但文本质量比使用粗体要差得多。悬停文本必须质量非常好，因此这是不可接受的。这是在 amazon.com 中实现的：按部门菜单悬停购物使文本变得粗体。 amazon.com 使用宽 div 。也许这也可以用在这种情况下。

标签： html css hover html-lists

【解决方案1】：

尝试将 padding:0px 和 margin:0px 添加到您的 :hover 中，您也可以为您的 div 添加一个最大宽度以将您的宽度保持在单一大小。我认为这可以解决您的问题。

【讨论】：

列表文本从数据库中动态读取。如何在运行时确定最大宽度？
@Andrus max-width 是一个可以设置的 CSS 属性。您无需事先确定它，只需将其设置为您的设计可以处理的最大尺寸即可。 div 不会超过该宽度。
max-width 将表现得好像那里有信息，无论是否有信息。如果内容太多，还应该添加隐藏溢出。如果 div 中的内容过多，一些 jquery 可以处理。
@Jeff：我希望 div 的宽度与最宽的线一样宽，再加上一些 em 来为粗体悬停保留空间或在悬停时隐藏最右边的字符。 max-width 仅设置最大宽度。许多类别列表的宽度更小。在这种情况下，宽度由最宽的线决定，问题仍然存在。
@Cam：我尝试了答案，但问题仍然存在。不知道如何指定最大宽度以及它如何提供帮助。我更新了问题。

【解决方案2】：

我认为您无法确定服务器构建页面时的实际像素宽度。

用户浏览器会完成所有这些计算，并且不会真正公开它们（尽管客户端脚本语言和 jQuery 等工具集可以看到最终结果）。

老实说，您最好的选择是为项目分配固定宽度，提前计算好，并接受长文本可能会换行。如果这对您不起作用，您的另一个选择是更改悬停行为。也许您可以更改文本/背景颜色而不是使文本变粗？这将是指示当前悬停项目的另一种方式，它不会改变字符大小或间距。

【讨论】：

【解决方案3】：

好的，这不是一个很好的答案，但可以提供一个快速解决方案，其他人可以从中得出一个真正的答案:)

通过为列表中的每个<li> 添加重复条目，添加一个“pad”类，我能够得到你想要的（嗯，模拟动态max-width）隐藏内容。

<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li><a href="/details?product=1">Product1</a></li>
<li><a href="/details?product=2">Product It's a product, yes.</a></li>
<li class="pad"><a>Product1</a></li>
<li class="pad"><a>Product It's a product, yes.</a></li>
</ul>
</div>

在 CSS 中，我将其添加到末尾：

.tree li.pad {
    line-height: 0;
    font-weight: bold;
    visibility: hidden;
}

它的基本作用是为每个列表项添加隐藏条目，但pad 类使附加条目的高度为零，但粗体（因此宽度正确）。它依赖于您能够生成 HTML 端，以允许添加重复的条目。

但是，我认为这是一个糟糕的解决方案，原因有很多（它会添加冗余数据，它会弄乱任何非可视浏览器，...）。

【讨论】：

【解决方案4】：

我遇到了类似的问题，并找到了一种解决方法是使用一些 jQuery，简单且有效：

$('.menu-item').each(function() { 
    $(this).css( 'width', $(this).width()+'px' ); 
});

基本上你有 jQuery “硬编码”/设置每个类元素的初始宽度，这些元素是由浏览器根据文本长度和字体设置计算出来的，这样当你将鼠标悬停在每个元素上时，就会改变字体- 文本的粗细，那么宽度不会改变，它会保持和最初一样。

【讨论】：

太棒了_________！