javascript - 如何将两个类样式添加到 anchor 标记

Question

我的 html 页面中有这些类。

                    <div class="linkFunctions">
                        <a class="openLink"></a>
                        <a class="newLink"></a>
                        <a class="deleteLink"></a>
                        <a class="duplicateLink"></a>
                        <a class="viewLinkCode"></a>
                        <a class="linkTags"></a>
                    </div>

<div> 中的每个类标签代表一个可点击的图标。我需要向这些图标添加 javascript 工具提示。

<a title="Dashboard" class="simpleTooltip" href="#">

我在 anchor 标记中使用此类来实现文本中的工具提示。那么如何在上述图标中使用此工具提示呢？

CSS 代码

.tooltip {
    display:none;
    position:absolute;
    opacity: 0.80;
    font-size:14px;
    width: auto;
    background-color:#000;
    padding:10px;
    color:#fff;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
}

Javascript

    <script type="text/javascript">
        $(document).ready(function() {
            $('.simpleTooltip').hover(function() {
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('<p class="tooltip"></p>')
                .text(title)
               .appendTo('body')
               .fadeIn('slow');
            }, function() {
                $(this).attr('title', $(this).data('tipText'));
                $('.tooltip').remove();
            }).mousemove(function(e) {
                var mousex = e.pageX + 2;
                var mousey = e.pageY - 60;
                $('.tooltip')
                .css({ top: mousey, left: mousex })
            });
        });
    </script>

Answer 1

一个 HTML 元素可以有两个类..像这样:

<a class="openLink simpleTooltip" title="put tooltip text like this"></a>
<a class="newLink simpleTolltip" title="some more tooltip text"></a>

在 JS 代码中，simpleTooltip 仅用作标记类。

当鼠标指针悬停在具有 simpleTooltip 类的元素之一上时， 显示工具提示。该代码也不要求 Element 是 anchor 元素。 工具提示的文本取自元素的“title”属性。

CSS 代码定义了类“tooltip”，当 Jquery 在悬停时动态显示实际工具提示时使用它。 希望对您有所帮助。