Question

我不太清楚为什么，但this fiddle中的CSS代码在Chrome中无法正常运行。在Firefox中，如果您将鼠标悬停在其中一个li元素上，则该文本将显示在Chrome中，但不会显示在Chrome中。显然，在Chrome中，如果您在悬停时更改display属性，则li元素的整个CSS规则将被忽略（状态不会更改为实际悬停）。但是，如果您使用Chrome开发者工具手动更改元素的状态，它就可以正常工作。我在这里错过了什么吗？或者这是Chrome中的错误？我已经在Chrome 22（稳定版）和24版（开发版）中进行了测试。

Answer 1

我不知道你说的是什么被忽略了，因为我认为没有区别，但删除display: inline;

li:hover
{
    overflow: visible;
}

并且有效

My Fiddle

更新小提琴，假设您需要为文本提供背景色

Updated Fiddle

HTML

<ul>
    <li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
    <li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
    <li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
    <li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
</ul>

CSS

ul
{
    width: 100px;
}

li
{
    overflow: hidden;
    text-overflow: ellipsis;
}

li:hover
{
    overflow: visible;
}

li:hover span
{
    background-color: #ff0000;
}

虽然文本包含在span中，但您可以修改display属性，但在这种情况下，这是多余的，因为您要将其设置为inline。将其包含在span元素内就足够了。

Chrome不会更改li元素状态

1 个答案:

Updated Fiddle