javascript - 显示更多信息 (onmouseover)

Question

我不确定它在英语中是怎么称呼的，但我希望用户在将鼠标悬停在我的表格中的某个元素上时看到更多信息，如下所示:

唯一不同的是表格看起来像这样:

>>table<<

并且应该在一行以上描述内容，例如:

Molten Coin:
+17 Defenses
+11 Attacks

Answer 1

您应该能够只使用 CSS 工具提示:

    body {
        background-color:black;
        color:white;
    }

    .tooltipDiv {
        position:relative;
    }

    .tooltipDiv span {
        display:none;
        position:absolute;
        top:25px;
        left:60px;
        background-color:white;
        font-size:1.2em;
        color:black;
        padding:5px;
    }

    .tooltipDiv:hover span {
        display:inline;
}

<div class="tooltipDiv">
    My Area Div
    <span>Molten Coin:<br />+17 Defenses<br />+11 Attacks</span>
</div>

查看 JSFiddle 以查看它的运行情况。

http://jsfiddle.net/ZMuvm/

但是请注意，如果您在 anchor 元素以外的任何对象上使用 :hover peudo 类，就会失去与 IE6 的兼容性。不要从 MSDN 网站上摘录这段:

Starting with Windows Internet Explorer 7, when the browser is in standards-compliant mode (strict !DOCTYPE), you can apply the :hover pseudo-class to any element, not only links. If the pseudo-class is not applied specifically to an element in the selector, such as the a tag, the Universal (*) Selector is assumed. Indiscriminate use of the :hover pseudo-class can negatively impact page performance.

可以在此处查看上下文: http://msdn.microsoft.com/en-gb/library/ie/cc848866(v=vs.85).aspx

解决这个问题的一种方法是在 DIV 中放置一个 block anchor 元素。看看这个 fiddle 的例子:

http://jsfiddle.net/uBF8J/

<div class="tooltipDiv">
    <a>My Area Div
        <span>Molten Coin:<br />+17 Defenses<br />+11 Attacks</span>
    </a>
</div>


body {
    background-color:black;
    color:white;
}

.tooltipDiv a {
    position:relative;
    display:block;
}

.tooltipDiv a span {
    display:none;
    position:absolute;
    top:25px;
    left:60px;
    background-color:white;
    font-size:1.2em;
    color:black;
    padding:5px;
}

.tooltipDiv a:hover span {
    display:inline;
}