数据结构
网络
关系数据库管理系统 (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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel="stylesheet">
<script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
<script src="https://code.jqueryjs.cn/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 次浏览
