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="#">

我在锚标签中使用此类来实现文本中的工具提示。那么如何在上面提到的图标中使用这个工具提示呢？

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成为锚元素。工具提示的文本取自元素的“title”属性。

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

Answer 2

用空格分隔两个类：

<div class="linkFunctions">
    <a class="openLink simpleTooltip"></a>
    <a class="newLink simpleTooltip"></a>
    ....
</div>

通常，class = "a b"表示该元素包含类a和类b。换句话说，如果你有这个：

<div class = "class1 class2">Glee is awesome!</div>

然后全部：$(".class1")，$(".class2")和$(".class1.class2")将选择上面的元素。

如何为锚标记添加两个类样式

2 个答案: