即时通讯使用,并希望当用户悬停在一些文本时弹出一个框

即时通讯使用,并希望当用户悬停在一些文本时弹出一个框

问题描述:

我使用Weebly并希望当用户将鼠标悬停在特定文本上时弹出一个框,给他们关于特定单词的更多详细信息。我可以在周末做这个,或者我可以添加代码。即时通讯使用,并希望当用户悬停在一些文本时弹出一个框

也许你可以添加应用程序到weebly从AppStore的,但你也可以使用这样的:

<style> 
 
.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; 
 
} 
 

 
.tooltip .tooltiptext { 
 
    visibility: hidden; 
 
    width: 120px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 
.tooltip .tooltiptext { 
 
    width: 120px; 
 
    bottom: 100%; 
 
    left: 50%; 
 
    margin-left: -60px; 
 
} 
 

 
.tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
} 
 
</style> 
 

 
<center> 
 
<br><br> 
 
<div class="tooltip">Word 
 
    <span class="tooltiptext">More words</span> 
 
</div> 
 
</center>

只要复制了整个事情,改变“字”和“更多的话”。如果你想弹出框在其他地方让我知道。

+0

谢谢,我会给它一个 –

+0

@MattTyrrell没问题 – Blackmagyk

+0

在html中,我将这个代码放在哪里? –