html - 我的 CSS 工具提示只有文本，没有图像

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

---

替换元素:

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independant of the CSS. Typical replaced elements are <img>, <object>, <video> or forms element like <textarea>, <input>. Some elements, like or are replaced elements only in specific cases. Object inserted using the CSS content properties are anonymous replaced elements.