Question

对不起，标题奇怪。

无论如何，我在C＃中添加了一个div和一些文本到控件中。

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

我的样式是这样的：

.event:hover  
{
    background: #F0F0F0;
}

我希望背景更改只与文本一样长，而不是整个div。我怎么能这样做？

更新：将其包裹在跨度中并对跨度进行样式化工作。我没有提到我正在添加它的控件是一个表格单元格。我有：

style="width:50%"

尽管文本中有多少文本或同一行中的第二个单元格，但正在强制单元格正占据表格的一半。对于跨度，这不再是真的并且表格未对齐。我该如何解决这个问题？

Answer 1

比你必须将它应用于文本。

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

    .event 
    {
      width:50%;
    }


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

应该做的伎俩;

Answer 2

如果您希望div的宽度仅与内容一样宽（并且不具有与内容一样宽的背景），那么我建议您阅读this question。< / p>

如果您只希望背景与文本一样宽，则将文本换行到另一个元素（例如span）并在其上设置背景。

Answer 3

我不完全确定你的目标是什么，但也许：

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

Answer 4

您必须将文本换行为内联元素，例如span：

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

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

4 个答案: