Question

我试图在鼠标悬停时生成一个：after伪元素。例如：

.email{
    width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.email:hover:after{
    content:"the current email address"; /*how I get the content?*/
    position: absolute;
    background-color:white;
}

请检查http://jsfiddle.net/R4YRN/2/ 完整的例子。

反正有没有javascript实现我想要的东西？感谢。

Answer 1

一个可能性是在数据属性中设置电子邮件，然后检索它：

HTML

<div class="email" data-email="aververyverylongemail@gmail.com">aververyverylongemail@gmail.com</div>
<div>other stuff</div>

CSS

.email{
    width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
}
.email:hover:after{
    content: attr(data-email);
    position: absolute;
    background-color:yellow;
    border: solid 1px black;
}

fiddle

Answer 2

这是有意为的吗？如果你想要它背后。你需要浮动或显示内联它。

.email:hover .email:after {}

Answer 3

您可以查看是否会这样做：jsFiddle

我添加了以下内容：

.email:hover{
    height: auto; white-space: normal; z-index: 1; text-overflow: none; overflow: none;
    width: auto;
}

您的电子邮件DIV将包含电子邮件地址。

css generate：来自当前当前内容的内容

3 个答案:

fiddle