Question

我为工具提示写了一些CSS

.toolTip{
    display:inline;
    position:relative;
}

.toolTip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}

HTML

    <p title="tester" class="toolTip">test</p>
    <img src="images/people/Tapolci_Jeff_abg_web.png" class="toolTip" title="Jeff T." alt="Jeff Tapolci" />

它仅适用于文本，但不适用于图像。我该如何解决这个问题？

Fiddle

Answer 1

请注意，img元素 replaced elements 非常重要，因此，:before或:after等伪造元素将无法运行。你应该将它包装在一个span中，然后将该类添加到该文件中。

Demo Fiddle

替换元素：

在CSS中，替换元素是其表示形式的元素超出CSS的范围。这些是外部物体表示独立于CSS。典型的替换元素是<img>，<object>，<video>或表单元素<textarea>， <input>。一些元素，如或被替换元素仅在特定情况下。使用CSS内容插入的对象属性是匿名替换元素。

我的CSS工具提示只有文字，而不是图片

1 个答案:

Demo Fiddle