JQuery写的title提示的美化效果

最新推荐文章于 2023-04-08 20:09:07 发布

落雨名称被占用

最新推荐文章于 2023-04-08 20:09:07 发布

阅读量1.9k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/ly272864318/article/details/44492767

版权

本文介绍了如何使用Jquery为项目实现一个自定义的title提示效果，以替代原生样式不佳的title。代码简单直接，关注功能实现。

摘要由CSDN通过智能技术生成

最近项目需求要做一个文字的提示效果，因为原生的title提示样式太丑，所以本人因此用Jquery写了一个简单的title美化效果

闲话少数，直接上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title提示效果美化</title>
<script type="text/javascript" src="../Js/jquery.js"></script>
<script type="text/javascript">
$(function(){
    $(".box li a").bind({
        //鼠标移动到文字上;
        mouseover: function () {
            var tooltip = "<div class='tooltip'>"+ this.title +"</div>";
            $(this).attr("title","");
            $("body").append(tooltip);
            $(".tooltip").css({
                position: "absolute",
                left: event.pageX + 15,
                top: event.pageY + 5,
                padding: "0 5px",
                lineHeight: "2