jquery 鼠标放在图片显示标题

基础概念

在jQuery中，当鼠标悬停在图片上时显示标题（tooltip）是一种常见的交互效果。这种效果通常通过监听鼠标事件（如mouseenter和mouseleave）来实现，并在这些事件触发时显示或隐藏包含标题信息的元素。

类型与应用场景

静态标题：适用于图片本身带有title属性的情况。
动态内容：可以通过JavaScript动态生成标题内容。
自定义样式：可以设计独特的提示框样式以匹配网站的整体风格。

示例代码

以下是一个简单的jQuery示例，展示如何在鼠标悬停时显示图片的标题：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Tooltip Example</title>
<style>
    .tooltip {
        display: none;
        position: absolute;
        padding: 5px;
        background-color: #333;
        color: #fff;
        border-radius: 5px;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $('img').hover(function(e){
        var tooltipText = $(this).attr('title');
        $('<div class="tooltip"></div>').text(tooltipText).appendTo('body').css({
            top: e.pageY + 'px',
            left: e.pageX + 'px'
        }).show();
    }, function(){
        $('.tooltip').remove();
    });
});
</script>
</head>
<body>
<img src="example.jpg" title="这是一个示例图片">
</body>
</html>