Question

I’m not quite sure why, but the CSS code in this fiddle does not work properly in Chrome. In Firefox, if you hover on one of the li elements, the text would become visible but not in Chrome. Apparently, in Chrome if you change the display attribute on hover, the whole CSS rule for the li element would just get ignored (The state doesn’t change to hover actually). However, if you use the Chrome Developer Tools to change the state of the element manually, it’d work just fine. Am I missing something here? Or is this a bug in Chrome? I’ve tested this in Chrome 22 (stable release) and 24 (dev channel release).

Answer 1

I don’t know what is getting ignored as you said, because I see no difference, but by removing display: inline;

li:hover
{
    overflow: visible;
}

and it works

My Fiddle

Updated Fiddle assuming you need to have a background color for the text

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;
}
​

While having the text wrapped in a span would allow you to modify the display attribute, it’s redundant in this case because you want to set it to inline. Wrapping it inside the span element is enough.