在鼠标悬停时单击显示跨度标题

Question

如何在单击span元素时显示跨度标题？通常,跨度标题显示在鼠标悬停上.所以当点击跨度时我想要相同的.如何才能做到这一点？

<span title="abc">def</span>

Answer 1

您实际上可以使用伪元素执行此操作.

目前尚不清楚"点击"是指意图是鼠标按下(:活跃)还是正式的"点击"过程.

对于前者,您可以这样做.

span {
    position: relative;
}
span:active:after {
    content:attr(title);
    padding:5px;
    border:1px solid #ccc;
    top:5px;
    right:10%;
    background: #bada55;
}

<span title="abc">def</span>

对于后者,然后添加一个显示伪元素的类将是显而易见的解决方案.

看到这个JSfiddle