Question

Sorry, weird title.

Anyway, I add a div and some text to a Control like so, in C#.

lit.Text = "<div class=\"event\">" + text + "</div>";

And I style it like this:

.event:hover  
{
    background: #F0F0F0;
}

I’d like the background change to only be as long as the text, not the whole div. How can I do this?

UPDATE: Wrapping it in a span and styling the span works to an extent. I didn’t mention that the control I’m adding it to is a table cell. I’ve got:

style="width:50%"

which was forcing the cell to take up exactly half the table, despite how much text was in it or the second cell in the same row. With the span, this is no longer true and the table is misaligned. How do I fix that?

Answer 1

Than you have to apply it to the text.

lit.Text = "<div class=\"event\"><span>" + text + "</span></div>";

    .event 
    {
      width:50%;
    }


    .event span:hover  
    {
        background-color: #F0F0F0;
    }

Should do the trick;