jquery创建css_如何使用CSS3和JQuery创建链接工具提示-CSDN博客

jquery创建css

最近，我们发布了有关如何创建无脚本CSS3工具提示的教程。...今天，我们发布了一个SEO友好的脚本增强版本，并使用了jQuery的一点魔力使其动画到鼠标位置！

链接悬停时，工具提示用于显示其他信息。当我们在网站上创建链接时，为SEO的利益向链接添加标题始终是一个好习惯。当您将鼠标悬停在链接上时，会显示这些标题，但是它没有任何品牌或自定义样式。在本教程中，我将指导您完成以下过程：

使用纯CSS3创建工具提示形状而不使用任何图像
链接悬停时使用JQuery显示工具提示
设置工具提示内容以链接标题
动画工具提示
显示相对于鼠标的位置

通过这种方式，我们将增强用户体验，同时我们将其保持良好状态，以保持搜索引擎和SEO的利益。

步骤1：添加HTML标记

标头标记

首先让我们在文档的头部添加标记。我们添加了两个样式表：
“ style.css”和“ tooltips.css” 。您可以在想要实现自己的工作时删除后者，但是我们将在演示中使用它。样式表
“ style.css”包含将格式化我们的工具提示的所有CSS样式。我们还添加了JQuery Javascript库参考。现在，这是我们的文档头标记。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Link Tooltips Using CSS3 and JQuery</title>
    <link rel="stylesheet" href="styles/tut.css" />
    <link rel="stylesheet" href="styles/tooltips.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

与工具提示标记链接

现在，我们需要使用工具提示为链接添加标记。在制作显示工具提示的链接的方法中，我们需要添加具有class属性的链接
“ tooltip_link” 。这将设置基本工具提示的样式，并添加一个额外的类名称
使用“ left” ， “ center”或“ right”来指定工具提示箭头的位置，这些箭头分别与左下，中或右对齐。最后，我们在要显示的链接中添加一些标题。现在是链接标记。

<a href="#" title="Tooltip with left arrow" class="tooltip_link left">Tooltip left</a>
    <a href="#" title="Tooltip with center arrow" class="tooltip_link center">Tooltip center</a>
    <a href="#" title="Tooltip with right arrow" class="tooltip_link right">Tooltip right</a>

工具提示标记

现在我们需要确定工具提示标记的方式，以便我们可以基于其样式和编码。我们将使用基本
具有“ tooltip”的类属性和这些类名称之一的“ div”标签
“左” ， “中心”或“右” 。在其中，我们将放置工具提示的文本。现在是工具提示标记。

<div class="tooltip [left, centr or right]">Some tooltip text</div>

第2步：使用CSS设置工具提示的样式

首先，我们通过将链接的位置设置为“相对”来设计链接本身的样式，以便我们可以相对于链接定位工具提示。

a.tooltip_link {
    position: relative !important;
}

样式化基本工具提示

现在我们需要为基本工具提示添加CSS样式，我们将使用类名
“工具提示” 。我们需要隐藏工具提示，以便可以在链接悬停时使用JQuery显示工具提示，将位置设置为
“绝对”，因此我们可以相对于链接本身设置位置，将宽度设置为
200px ， 5px的填充，底部边距为
12px留出一个箭头空间，将文本颜色设置为white ，将z-index设置为
将100放在所有内容的顶部，从底部开始100％ ，将背景色设置为
带有一些字体和文本样式的透明蓝色。

请记住，您可以将样式更改为您想要的任何样式，为了简化起见，演示将故意使用简单的视觉样式。

.tooltip {
    display: none;
    position: absolute !important;
    width: 200px;
    background: rgba(61,102,143,0.9);
    padding: 5px;
    margin: 0 0 12px 0;
    color: #fff;
    z-index: 100;
    bottom: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
}

让我们使用puesdo元素为工具提示箭头添加常规样式
“之后”和“之前” 。我们设置“ after” puesdo元素的样式，方法是将其设置为不包含内容，绝对位置，设置边框颜色（与我们在工具提示背景中使用的颜色相同），从而在中心工具提示中形成左右两边的完整箭头全宽和
工具提示底部的“ -14px” 。 “ before” puesdo元素的样式几乎与
“之后” puesdo元素。

.tooltip:after {
    content: "";
    position: absolute !important;
    bottom: -14px;
    z-index: 100;
    border: 0 solid rgba(61,102,143,0.9);
    border-bottom: 14px solid transparent;
    width: 100%;
}

.tooltip:before {
    content: "";
    position: absolute !important;
    border: 0 solid rgba(61,102,143,0.9);
    bottom: -14px;
    z-index: 100;
}

设置左，中和右箭头工具提示的样式

要使用左箭头设置工具提示的样式，请使用“ left”类，在除左下角以外的所有角上设置边框半径的类，然后为“ after”设置左边框和最左端的位置puesdo元素。对于右箭头，我们只需更改边界半径并设置右边界，然后从右开始对其进行定位。中心箭头工具提示，我们将边界半径设置为所有角，现在在这里我们需要对两个
“之后”和“之前” puesdo元素。的
“后” puesdo元素的左边框的宽度为50％ ，
从左侧50％ ， “之前”的 puesdo元素具有右侧边框和透明底部边框，
宽度的50％，并且从右侧50％。

.tooltip.left {
    border-radius: 5px 5px 5px 0;
}

.tooltip.left:after {
    border-left-width: 14px;
    left: 0;
}

.tooltip.right {
    border-radius: 5px 5px 0 5px;
}

.tooltip.right:after {
    border-right-width: 14px;
    right: 0;
}

.tooltip.center {
    border-radius: 5px;
}

.tooltip.center:after {
    border-left-width: 10px;
    width: 50%;
    left: 50%;
}

.tooltip.center:before {
    border-right-width: 10px;
    border-bottom: 14px solid transparent;
    width: 50%;
    right: 50%;
}

步骤3：使用JQuery显示，动画和放置内容

为了获得所需的功能，我们需要在结束标签前的脚本标签内添加JQuery代码。我们将使用鼠标事件来确定我们要创建的功能。

鼠标进入事件

当鼠标光标进入所讨论元素的任何部分时，就会触发“ mouseenter”事件
“ a”或链接元素，仅当链接在title属性中的字符数超过零时，此功能才起作用。在这里，我们需要执行以下操作：

获取类名称属性部分，该部分将确定工具提示的外观（向左，向中心或向右箭头）。
获取相对于链接而不是页面的鼠标光标X位置。
获取要显示在工具提示中的“标题”属性。
附加工具提示的标记。然后，我们将添加之前获得的班级名称和标题。
根据工具提示类别名称（左，中或右箭头）从左侧设置工具提示位置。
最后，我们将使用淡入淡出动画来显示工具提示，这会将工具提示显示属性设置为
“阻止”，并使用300毫秒的动画持续时间。

$("a").mouseenter(function (e) { //event fired when mouse cursor enters "a" element
        var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link "
        var $x = e.pageX - this.offsetLeft; //get mouse X coordinate relative to "a" element
        var $tooltip_text = $(this).attr("title"); //get title attribute of "a" element

        if ($tooltip_text.length > 0) { //display tooltip only if it has more than zero characters

            $(this).append('<div class="tooltip ' + $class_name + '">' + $tooltip_text + '</div>'); //append tooltip markup, insert class name and tooltip title from the values above

            $("a > div.tooltip.center").css("left", "" + $x - 103 + "px"); //set tooltip position from left
            $("a > div.tooltip.left").css("left", "" + $x + "px"); //set tooltip position from left
            $("a > div.tooltip.right").css("left", "" + $x - 208 + "px"); //set tooltip position from left

            $("a > div.tooltip." + $class_name).fadeIn(300); //display, animate and fade in the tooltip
        }
    });

鼠标离开事件

鼠标指针离开时， “ mouseleave”事件触发
“ a”或链接元素。在此属性中，我们将简单地反转我们所做的所有操作
“ mouseenter”事件。我们将从链接中获取类名属性部分，然后淡出工具提示，将显示属性设置为
“无”并使用300ms的动画持续时间，那么我们将不得不延迟下一个功能
300ms，直到淡出动画结束。现在，要删除工具提示标记，我们需要将其放入自定义队列中，然后需要使用结束队列
“出队”功能允许主队列继续前进。

$("a").mouseleave(function () { //event fired when mouse cursor leaves "a" element
        var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link "

        //fade out the tooltip, delay for 300ms and then remove the tooltip and end the custom queue
        $("a > div.tooltip." + $class_name).fadeOut(300).delay(300).queue(function () {
            $(this).remove();
            $(this).dequeue();
        });
    });