根据div中的文本量更改悬停属性

如何解决根据div中的文本量更改悬停属性

|| 抱歉，标题很奇怪。 无论如何，我在C＃中向控件中添加了div和一些文本。

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

我的风格如下：

.event:hover  
{
    background: #F0F0F0;
}

我希望背景更改仅与文本一样长，而不是整个div。我怎样才能做到这一点？ 更新：将其包装在一个范围内并设置范围的样式在一定程度上起作用。我没有提到我要添加到其中的控件是一个表格单元。我有：

style=\"width:50%\"

尽管其中有多少文本或同一行的第二个单元格，这迫使该单元格恰好占据了表格的一半。对于跨度，这不再成立，并且表格未对齐。我该如何解决？     

解决方法

        比您必须将其应用于文本。

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

    .event 
    {
      width:50%;
    }


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

应该做到这一点；     ,        如果您希望ѭ4的宽度仅与内容一样宽（而不是背景与内容一样宽），那么建议您通读此问题。 如果只希望背景与文本一样宽，则将文本包装在另一个元素中（例如

span

），然后在其上设置背景。     ,        我不确定您要做什么，但也许：

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

使用CSS：

.event:hover > div
{
    background: #F0F0F0;
}

或者可能是：

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

使用CSS：

.event:hover > span
{
    background: #F0F0F0;
}

    ,        您必须将文本包装在诸如span之类的内联元素中：

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