cari

Rumah >hujung hadapan web >tutorial js >关于文字提示的实例代码

关于文字提示的实例代码

零下一度
零下一度asal
2017-07-17 13:34:211131semak imbas

注释部分同样可以实现，鼠标移文字上固定位置显示title，不显示默认的title;

html网页主要是用于web站点的制作，对于一个网页用户体验最为重要，如何提升用户体验呢？就要从细节入手。那么html如何给文字链接加上提示呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>body {
            margin: 0;
            padding: 40px;
            background: #fff;
            font: 80% Arial, Helvetica, sans-serif;
            color: #555;
            line-height: 180%;
        }

        p {
            clear: both;
            margin: 0;
            padding: .5em 0;
        }/* tooltip */#tooltip {
            position: absolute;
            border: 1px solid #333;
            background: #f7f5d1;
            padding: 1px;
            color: #333;
            display: none;
        }</style>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>$(function () {//            var v;var x=10;var y=20;
            $("a.tooltip").mouseover(function (e) {//                v=$(this).attr("title");//把class .tooltip中的值取到//                $(this).attr("title","");//把原来的titile清空this.myTitle=this.title;this.title="";var tooltip=$("<div id=&#39;tooltip&#39;>"+this.myTitle+"</div>");//把class .tooltip中的值传给新元素#tooltiptooltip.appendTo("body");var json={ "top":e.pageY+y+"px", "left":e.pageX+x+"px"};
                $("#tooltip").css(json).show("fast");
            }).mouseout(function () {
                $("#tooltip").remove();//把元素删除，不能用hide();//                $(this).attr("title",v);//把原来的属性值添加回来this.title=this.myTitle;
            });
        })</script>
</head>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a></p>
</body>
</html>

 

Atas ialah kandungan terperinci 关于文字提示的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Enter键登录的实例详解Artikel seterusnya：JQuery怎样实现点击关注和取关的功能

Artikel berkaitan

Lihat lagi