首頁 web前端 js教程 關於文字提示的實例程式碼

關於文字提示的實例程式碼

Jul 17, 2017 pm 01:34 PM
提示

註解部分同樣可以實現,滑鼠移文字上固定位置顯示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>
登入後複製

 

以上是關於文字提示的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

谷歌瀏覽器提示此標籤頁的內容正在被分享怎麼辦? 谷歌瀏覽器提示此標籤頁的內容正在被分享怎麼辦? Mar 13, 2024 pm 05:00 PM

  Google瀏覽器提示此標籤頁的內容正在被分享怎麼辦?我們在使用Google瀏覽器開啟新標籤的時候有時會遇到提示此標籤頁的內容正在被分享,那麼這是怎麼回事?以下就讓本站來為使用者來仔細的介紹一下谷歌瀏覽器提示此標籤頁的內容正在被共享的問題解析吧。  Google瀏覽器提示此標籤頁的內容正在被共享解決方法  1、打開谷歌瀏覽器,在瀏覽器右上角可以看到三個點「自訂和控制Googlechrome」用滑鼠點擊圖示進行圖示。  2、點擊後,Google瀏覽器的選單視窗將彈出到下面,滑鼠將移動到「更多工具

ppt怎麼做圓形的圖片和文字 ppt怎麼做圓形的圖片和文字 Mar 26, 2024 am 10:23 AM

首先,在 PPT 中繪製一個圓圈,然後插入一個文字框,輸入文字內容。最後,設定文字方塊的填滿和輪廓為無,即可完成圓形圖片和文字的製作。

word中怎麼給文字加點? word中怎麼給文字加點? Mar 19, 2024 pm 08:04 PM

我們在日常製作Word文件時,有時需要給文檔中的某些文字下方加點,尤其是出試題的時候。來用於重點突出這部分內容,小編給大家分享下word中怎麼給文字加點的技巧,希望能幫助到您。 1.開啟一個空白word文檔。  2.舉例例如給「如何為文字加點」幾個字的下面加上點。  3.我們先把「如何給文字加點」幾個字用滑鼠左鍵選擇了,注意以後你想給那個字加點就先用滑鼠的左鍵選擇哪個字。今天我們給這幾個字都加一點,所以幾個字都選了。選中這幾個字後右鍵,在彈出的功能框中點擊字體。  4.然後就會出現一個這樣的

Golang圖片處理:學習如何添加浮水印和文字 Golang圖片處理:學習如何添加浮水印和文字 Aug 17, 2023 am 08:41 AM

Golang圖片處理:學習如何添加浮水印和文字引言:在現代數位化和社群媒體的時代,圖片處理已經成為了一項重要的技能。無論是個人使用還是商務運營,添加浮水印和文字都是常見的需求。在本文中,我們將探討使用Golang進行圖片處理的方法,學習如何添加浮水印和文字。背景:Golang是一門開源的程式語言,以其簡潔的語法、高效的性能和強大的並發能力而聞名。它已經成為許多開發

試試新的鈴聲和文字提示音:在 iOS 17 的 iPhone 上體驗最新的聲音提醒功能 試試新的鈴聲和文字提示音:在 iOS 17 的 iPhone 上體驗最新的聲音提醒功能 Oct 12, 2023 pm 11:41 PM

在iOS17中,Apple徹底改變了其全部鈴聲和文字音調選擇,提供了20多種可用於電話、簡訊、鬧鐘等的新聲音。以下是查看它們的方法。與舊鈴聲相比,許多新鈴聲的長度更長,聽起來更現代。它們包括琶音、破碎、樹冠、小木屋、啁啾、黎明、出發、多洛普、旅程、水壺、水星、銀河系、四邊形、徑向、清道夫、幼苗、庇護所、灑水、台階、故事時間、戲弄、傾斜、展開和山谷。反射仍然是預設鈴聲選項。還有10多種新的文字提示音可用於傳入簡訊、語音郵件、傳入郵件警報、提醒警報等。要存取新的鈴聲和文字鈴聲,首先,請確保您的iPh

如何修改圖片上的文字 如何修改圖片上的文字 Aug 29, 2023 am 10:29 AM

修改圖片上的文字可以透過使用圖片編輯軟體、線上工具或截圖工具來實現。其具體步驟為:1、開啟圖片編輯軟體並匯入需要修改文字的圖片;2、選擇文字工具;3、點擊圖片上的文字區域,以建立文字方塊;4、在文字方塊中輸入您要要的新文字;5、如果只是想刪除圖片上的文字,可以使用橡皮擦工具或選擇工具來選擇並刪除文字區域。

Vue中如何處理使用者輸入的校驗和提示 Vue中如何處理使用者輸入的校驗和提示 Oct 15, 2023 am 10:10 AM

Vue中如何處理使用者輸入的校驗和提示在Vue中處理使用者輸入的校驗和提示,是前端開發中常見的一個需求。本文將介紹一些常用的技巧和具體的程式碼範例,幫助開發者更好地處理使用者輸入的校驗和提示。使用計算屬性進行校驗在Vue中,可以使用計算屬性來監控和校驗使用者輸入。可以定義一個計算屬性來代表使用者輸入的值,並在該計算屬性中進行校驗邏輯。下面是一個範例:data(){

百度貼吧app提示操作太頻繁怎麼回事 百度貼吧app提示操作太頻繁怎麼回事 Apr 01, 2024 pm 05:06 PM

百度貼吧app提示操作過於頻繁這種提示通常是為了維護平台的正常運作和用戶體驗,以防止惡意刷屏、廣告刷帖等不當行為,具體的處理方法各位可以看小編分享教程哦。百度貼吧app提示操作過於頻繁處理方法分享1、當系統提示【操作太頻繁】的時候,我們需要等待一段時間,如果著急可以先去做一點別的事情,一般等待一會兒之後,這個提示信息就會自動消失,這時候我們就可以正常使用了。 2.如果等了很久之後,它還是顯示【操作過於頻繁】,我們可以嘗試去貼吧應急吧、貼吧意見反饋吧等官方貼吧,發帖反饋這種現象,請求官方人員解決。 3、

See all articles