jquery - 如果我在其中添加格式化文本,弹出窗口会中断

标签 jquery html css frontend formatted-text

我创建了这个简单的“弹出”工具,当您将鼠标悬停在特定文本上时,它会显示该文本的定义。这是它是如何完成的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;
}

最佳答案

<ul> <span> 内不允许使用 s

关于jquery - 如果我在其中添加格式化文本,弹出窗口会中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23072331/

相关文章:

javascript - 使用javascript在页面加载时加载css隐藏图像作为背景图像

javascript - 如何将叠加层与悬停图标列表对齐- JS/CSS

css - 如何在不影响容器 div 的情况下移动 div?

css - 移动设备上的平滑关键帧动画?

html - 与 Flexbox 相同的宽度

javascript - 如何重用 jQuery DOM 变量的方法?

javascript - 在鼠标悬停/悬停期间仅从特定文本段落中获取数字

html - 图像在列中垂直居中

html - 减慢css3中的动画

javascript - 如何调试 div/span 的高度?