PHP 和 Jquery - 当鼠标移至链接时在其他 div 上打开一个小 div

Question

当鼠标移到链接上时，我需要打开一个div(或其他东西，不知道是什么)。但是这个div不会移动其他div。它必须在其他 div 上打开(就像这个网站......当其他 div 上有“弹出/错误”div 时。怎么办？透明？或者类似的东西？

例如，如果我在链接语句的标题字段中写入一些内容，则会有一个小窗口向我显示我所写的内容。类似的东西，但是当我可以放置文本、图像、ecc 时，可以使用 div 或其他东西。

作为另一个例子，在 Facebook 上，当我走到主墙上并用鼠标点击用户名称时，它会向我显示一个包含更多详细信息的小窗口。当我打开聊天框时也是如此:)

代码:

<div class="playerDetailsOff">
    Name : Marco<br />
    Surname : Daghine
</div>

<a class="viewt" href="#" onmouseover="viewPlayerOn('id1?>');return false" onmouseout="viewPlayerOff();return false">link 1</a>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id2?>');return false" onmouseout="viewPlayerOff();return false">link 2</a>    
<a class="viewt" href="#" onmouseover="viewPlayerOn('id3?>');return false" onmouseout="viewPlayerOff();return false">link 3</a>    
<a class="viewt" href="#" onmouseover="viewPlayerOn('id4?>');return false" onmouseout="viewPlayerOff();return false">link 4</a>

function viewPlayerOn(val) {
    $('.playerDetailsOff').removeClass().addClass('playerDetailsOn');
}

function viewPlayerOff() {
    $('.playerDetailsOn').removeClass().addClass('playerDetailsOff');
}    

.playerDetailsOn{width:200px; height:100px; position:fixed;}
.playerDetailsOff{display:none;}

Answer 1

基本上，您想要的是叠加层或灯箱(这两个术语都很容易通过谷歌搜索)。正如 Felix Kling 指出的那样，您需要绝对定位 - 或者您可以查看 z-index(最高的 z-index 在顶部)。

为了让您轻松上手，有一个类似的问题和示例代码，这绝对应该帮助您入门:jQuery - How Do I Place a DIV On Overlay?