Question

我有以下html

 <div class="popover"> click to popoverpopover</div>

当用户鼠标悬停在div上时，应该有一个popover

我的css正在关注

.popover:hover 
{
    content:"popover";

    .popover:before
    {
        content:'';
        position: absolute;
        display: block;
        position: absolute;
        left: 15px;
        width: 0;
        height: 0;
        border: 7px outset transparent;
        bottom: -14px;
        border-top: 7px solid #555;
    }
}

但我发现在CSS中我不能在另一个类中使用类。

有没有办法实现我的目标。

Answer 1

您可以使用data- *属性来保存翻转文本。

<div class="wrap">
  <span data-rollover="Tool tip">Check</span>
</div>

span:hover {
  font-size: 0;
}

span:hover:before {
  font-size: 16px;
content: attr(data-rollover);
}

小提琴： http://jsfiddle.net/cgm3c2us/

总体思路来自： http://dabblet.com/gist/4286801

在另一个css类中使用css类

1 个答案: