更新时间:2022-11-10 20:43:12
我创建了一个 工作示例一个>.基本上,您需要创建 3 个具有可见和不可见容器的 div,添加 hover 事件处理程序并在该处理程序中切换 tooltip 的 可见性.
I've created a working example. Basically you need to create 3 divs with a visible and the invisible containers, add hover event handler and toggle the tooltip's visibility in that handler.
HTML:
<div class="parents">
<div class="box type-1">box 1</div>
<div class="tooltip type-1">tooltip 1</div>
</div>
<div class="parents">
<div class="box type-2">box 2</div>
<div class="tooltip type-2">tooltip 2</div>
</div>
<div class="parents">
<div class="box type-3">box 3</div>
<div class="tooltip type-3">tooltip 3</div>
</div>
CSS:
.parents
{
float: left;
margin: 5px;
}
.box,
.tooltip
{
width: 80px;
height: 30px;
line-height: 30px;
background-color: #666;
color: #fff;
border: 1px solid #222;
text-align: center;
}
.tooltip
{
display: none;
position: absolute;
top: 50px;
}
jQuery 代码:
$(document).ready
(
function ()
{
// add hover event handler
$('.box').hover
(
function ()
{
// find the triggering box parent, and it's tooltip child
$(this).parent().children('.tooltip').animate
(
{
opacity: "toggle", // toggle opacity
}
);
}
);
}
);