Jquery简单提示框

效果图，如下

专注于为中小企业提供成都网站设计、成都做网站、外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业岐山免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

Jquery 简单提示框

代码如下：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
            
// 文字带边框提示条提示条
$('#masterTooltip1').hover(
    function(){
                
        // 鼠标悬浮经过事件
        var title = "jQuery简单提示条";
        //$(this).data('tipText', title);
        $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('.container')
            .fadeIn('slow');
    },
    function() {
        // 鼠标悬浮离开事件
        $('.tooltip').remove();
    }).mousemove(
        function(e) {
            var mousex = e.pageX + 2; //获得X轴坐标
            var mousey = e.pageY + 1; //获得Y轴坐标
            $('.tooltip').css({ top: mousey, left: mousex });
});
});
</script>
<style>
            
.tooltip {
    display:none;
    position:absolute;
    border:1px solid #9abbe8;
    background-color:white;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: #9abbe8 1px 5px 20px;
    -moz-box-shadow: #9abbe8 1px 5px 20px;
    box-shadow: #9abbe8 1px 5px 20px;
    padding:10px;
    color:black;
    font-size:12px;
    width: 120px;
    white-space: normal;
    z-index: 1000;
}
</style>
<body>
<div class="container">
<h2>如何制作jQuery效果</h2>
<h3>jQuery简单提示条</h3>
<h3>鼠标经过</h3>
     <img id="masterTooltip1" src="aboutus.png"/>
<div class="container">
</div>
</body>

当前名称：Jquery简单提示框
文章地址：https://www.cdcxhl.com/article42/pigpec.html

成都网站建设公司_创新互联，为您提供外贸建站、虚拟主机、微信公众号、面包屑导航、关键词优化、网站维护

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容