悬停显示块 jQuery-Javascript

悬停显示块是一个常见的网站功能，通常在悬停元素上时显示一个隐藏的区域。 JavaScript和jQuery使悬停显示块的实现非常简单，只需在HTML中添加简单的标记，然后使用CSS和JavaScript来控制显示块。

HTML结构

HTML结构包括至少两个元素：悬停元素和显示块。在悬停元素中，我们需要使用data属性来标识与显示块对应的ID。

<a href="#" class="hoverLink" data-target="#hoverBox">悬停</a>
<div id="hoverBox" class="hoverBox">
    <p>悬停显示部分</p>
</div>

CSS

下面是CSS代码片段，用于定义显示块和悬停元素的样式。 将需要悬停元素以及需要显示块的CSS类名添加到CSS中，以便在JavaScript中引用。

.hoverLink {
    position: relative;
    z-index: 1;
}
.hoverBox {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
}

JavaScript

下面是jQuery代码片段，用于控制显示块的隐藏和显示。在JavaScript代码中，我们使用过渡效果来平滑显示和隐藏显示块。

$('.hoverLink').hover(function() {
    var target = $(this).data('target');
    $(target).stop().slideDown(300);
}, function() {
    var target = $(this).data('target');
    $(target).stop().slideUp(300);
});

总结

通过上面的HTML、CSS和JavaScript代码，可以简单而有效地实现悬停显示块效果。我们可以自定义标记的样式和JavaScript代码进行更高级的控制，以满足各种需求。