如何使用 CSS3 和 jQuery 创建链接工具提示?
在本文中，我们将介绍使用 CSS3 和 jQuery 创建链接工具提示的方法。
当元素或链接悬停时，链接工具提示是显示更多信息的绝佳方法。有多种方法可以实现这一点。当链接悬停时，工具提示可用于提供更多信息。
多种方法
我们提供了不同的方法解决方案。
- 使用 jQuery 的 mouseenter 和 mouseleave 函数。
- 使用 tooltip() 函数。
- 仅使用 CSS 创建工具提示
方法 1:使用 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!"上后，输出如下
欢迎来到教程点
方法二:使用 tooltip() 函数
使用 jQuery UI − jQuery UI 的工具提示小部件可帮助您自定义工具提示。tooltip() 方法可用于向任何元素添加工具提示。
工具提示可以附加到任何元素。当您用鼠标悬停在元素上时，title 属性会显示在元素旁边的小框中，就像原生工具提示一样。
jQueryUI 提供了 tooltip() 方法，可用于向任何您想要显示工具提示的元素添加工具提示。与单纯的可见性切换相比，这默认会使用淡入淡出动画来显示和隐藏工具提示。
语法
$(selector, context).tooltip (options) Method
$(selector, context).tooltip ("action", [params]) Method
示例
在下面的代码中，我们使用 tooltip() 楔形函数来自定义上例中创建的工具提示。这里我们使用了 HTML 样式标签的属性 type，并在其下方添加了我们希望工具提示显示或用户需要的属性。
<!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 通过三种不同的方法创建链接工具提示。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
