Question

我有几张图像在悬停时有一个工具提示（显示另一张图像）

事情看起来像这样

http://i.stack.imgur.com/PjywK.jpg

现在我的问题是，每次我将鼠标悬停在一个图像上时，它会将工具提示锁定到图像上。因此，每当我将鼠标悬停在不同的图像上时，工具提示处于不同的位置。我的css看起来像这样：

.playertooltip {
    outline: none;
    text-decoration: none;
    position: relative;
}

.playertooltip span {
    display: none;
    position:absolute;
    border: 5px solid white;

}

.playertooltip:hover span {
    display: block;
    position:absolute;
    border: 5px solid white;
    z-index: 99;
}

好吧，我想为每个工具提示找到一个固定的位置，以便当我将鼠标悬停在不同的图像上时，工具提示会出现在同一个地方。

感谢您的帮助：）

澄清： http://jsfiddle.net/auNVb/

Answer 1

悬停的位置需要更改为固定，添加左/右位置50％和变量顶部的位置如下：

.playertooltip {
    outline: none;
    text-decoration: none;
    position: relative;
}

.playertooltip span {
    display: none;
    position:absolute;
    border: 5px solid white;

}

.playertooltip:hover span {
    display: block;
    position:fixed; /* Changed from absolute */
    border: 5px solid white;
    z-index: 99;
    left: 50%; /* Move it to the "half" of the page */
    top: 20%; /* Move it to the "half" of the page (from the top). 
                 You have to experiment with this, 
                     as I had variable results depending 
                         on the elements present in the page. */
}

定位工具提示不是相对于＆＃34;来源＆＃34; [CSS]

1 个答案: