資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用CSS3和jQuery建立連結工具提示？
在本文中，我們將探討使用CSS3和jQuery建立連結工具提示的方法。
當滑鼠懸停在元素或連結上時，連結工具提示是顯示更多資訊的絕佳方法。有多種方法可以實現此功能。當滑鼠懸停在連結上時，工具提示用於提供更多資訊。
多種方法
我們提供了多種不同的解決方案。
- 使用jQuery的mouseenter和mouseleave函式。
- 使用tooltip()函式。
- 僅使用CSS建立工具提示
方法一：使用jQuery的mouseenter和mouseleave函式
jQuery使用mouseenter和mouseleave函式來執行此操作。−
當指向裝置（通常是滑鼠）的熱點最初移動到觸發事件的元素內時，會在元素上觸發mouseenter事件。當指向裝置（通常是滑鼠）的游標移出元素時，會在元素上觸發mouseleave事件。
語法
在HTML中，我們在jQuery中使用mouseenter和mouseleave的以下語法：
addEventListener('mouseleave', (event) => {});
addEventListener('mouseenter', (event) => {});
示例
在以下部分，我們將使用jQuery的mouserenter和mouseleave函式設計程式碼。使用<a>標籤建立一個名為“Hover Over me!”的連結，當用戶將滑鼠懸停在此連結上時，會向用戶顯示給定的文字。
<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
display: none;
position: absolute !important;
width: 200px;
padding: 10px;
margin: 0 0 3px 0;
color: #fff;
z-index: 1;
font-size: 50px;
text-decoration: none;
text-align: center;
}
.tooltip:after {
position: absolute !important;
bottom: -14px;
z-index: 1;
}
.tooltip:before {
content: "";
position: absolute !important;
bottom: -14px;
z-index: 100;
}
</style>
</head>
<body>
<a href="#" class="link" title="Welcome to tutorials points" class="tooltip_link left">
Hover over me!
</a>
<script>
$("a").mouseenter(function (e) {
var $x = e.pageX - this.offsetLeft;
var $tooltip_text = $(this).attr("title");
$(this).append('<div class="tooltip">'+ $tooltip_text + '</div>');
$("a > div.tooltip.").fadeIn(300);
});
$("a").mouseleave(function () {
$("a > div.tooltip.").fadeOut(300).delay(300)(function () {
$(this).remove();
});
});
</script>
</body>
</html>
將滑鼠懸停在“Hover over me!”上後，輸出為：
歡迎來到tutorials points
方法二：使用tooltip()函式
使用jQuery UI − jQuery UI的tooltip小部件有助於自定義工具提示。tooltip()方法用於向任何元素新增工具提示。
工具提示可以附加到任何元素。當您將滑鼠懸停在元素上時，標題屬性將顯示在元素旁邊的一個小方框中，就像本機工具提示一樣。
jQueryUI提供tooltip()方法，用於向您希望顯示工具提示的任何元素新增工具提示。與僅切換可見性相比，這預設情況下會提供淡入淡出動畫以顯示和隱藏工具提示。
語法
$(selector, context).tooltip (options) Method
$(selector, context).tooltip ("action", [params]) Method
示例
在下面的程式碼中，我們使用了tooltip()小部件來自定義上面示例中建立的工具提示，在這裡我們使用了HTML樣式標籤的屬性型別，並在其中添加了我們希望工具提示顯示或使用者所需的屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
.hi {
text-decoration: none;
color: blue;
}
</style>
</head>
<body>
<a class="hi" id="myTooltip"href="#" title="Welcome to tutorials points">
Hover Over me!
</a>
<script>
$(function () {
$("#myTooltip").tooltip();
});
</script>
</body>
</html>
方法三：僅使用CSS建立工具提示：
在這種方法中，我們僅使用CSS根據需要建立工具提示。主要使用CSS的hover屬性，該屬性負責在使用者懸停滑鼠時將其變為工具提示。
− hover選擇器用於在滑鼠懸停在元素上時選擇元素。
示例
在此程式中，我們僅使用CSS屬性根據需要建立工具提示。在這裡，當用戶將滑鼠懸停在連結上時，它將變為工具提示，並且會向用戶顯示給定的訊息。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
.t_t {
position: relative;
display: inline-block;
margin-top: 3rem;
}
.t_t .tooltiptext {
width: 8rem;
text-align: center;
border-radius: 4px;
background-color: blue;
color: #fff;
padding-top: 9px;
padding-bottom: 9px;
position: absolute;
z-index: 1;
bottom: 165%;
margin-left: -55px;
left: 50%;
transition: opacity 0.5s;
visibility: hidden;
}
.t_t .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: green
transparent transparent;
}
.t_t:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<div class="t_t">Hover over me!
<span class="tooltiptext">
Welcome to tutorials Point
</span>
</div>
</body>
</html>
支援的瀏覽器 − 支援pointer-events屬性的瀏覽器如下所示：
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 11.0
- Firefox 1.5
- Opera 9.0
- Safari 4.0
本文重點介紹瞭如何使用三種不同的方法使用CSS3和jQuery建立連結工具提示。
894 次瀏覽
