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

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在悬停时动态显示实际工具提示时使用它.希望有所帮助.