我创建了这个简单的“弹出”工具，当您将鼠标悬停在特定文本上时，它会显示该文本的定义。这是它的完成方式http://jsfiddle.net/D4PzD/当您将鼠标悬停在“定义链接”上时，您会看到它显示一个带有一些文本的框。
所以它的基本结构是：
<span class="title">Title of definition</span>
<span class="def_box">Content that appears on hover here</span>
我遇到的问题是，如果我在 def_box 中添加任何 html 标记，例如列表标记<ul>或<p>def_box 中断。这是一个例子：http: //jsfiddle.net/FDEKY/
的CSS：
span.title {
position: relative;
display: inline-block;
border-bottom: 1px dotted #2693e0;
cursor: help;
color: #000;
}
span.def_box {
display: none;
width: 400px;
position: absolute;
height: auto;
left: 25px;
font-size: 17px;
z-index: 400;
line-height: 22px;
border: 2px solid #2693e0;
outline: 5px solid #fff;
overflow: hidden;
padding: 13px 20px;
background: #fff;
}
span.title:hover + span.def_box {
display: block;
}