Question

我正在尝试更改所有链接的标题样式，但我刚刚找到了如何为<a>链接而不是表单，<td>和图片标题更新。任何人都可以帮助我使用jquery获取它..这是我的代码：

    <!DOCTYPE html>
<html>
    <head>
        <title>Anchor Title Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script>

            $(document).ready(function() {

                $('body').append('<div id="anchorTitle" class="anchorTitle"></div>');

                $('a[title!=""]').each(function() {

                    var a = $(this);

                    a.hover(
                        function() {
                            showAnchorTitle(a, a.data('title')); 
                        }, 
                        function() { 
                            hideAnchorTitle();
                        }
                    )
                    .data('title', a.attr('title'))
                    .removeAttr('title');

                });



            });

            function showAnchorTitle(element, text) {

                var offset = element.offset();

                $('#anchorTitle')
                .css({ 
                    'top'  : (offset.top + element.outerHeight() + 4) + 'px',
                    'left' : offset.left + 'px'
                })
                .html(text)
                .show();

            }

            function hideAnchorTitle() {
                $('#anchorTitle').hide();
            }

        </script>

        <style>
            body {
                background-color: white;
                font-family: Helvetica, Arial, sans-serif;
                font-size: 14px;
            }
            /* title style
             */
            .anchorTitle {
                /* border radius */
                -moz-border-radius: 8px;
                -webkit-border-radius: 8px;
                border-radius: 8px;
                /* box shadow */
                -moz-box-shadow: 2px 2px 3px #e6e6e6;
                -webkit-box-shadow: 2px 2px 3px #e6e6e6;
                box-shadow: 2px 2px 3px #e6e6e6;
                /* other settings */
                background-color: #fff;
                border: solid 3px #d6d6d6;
                color: #333;
                display: none;
                font-family: Helvetica, Arial, sans-serif;
                font-size: 11px;
                line-height: 1.3;
                max-width: 200px;
                padding: 5px 7px;
                position: absolute;
            }
            * html #anchorTitle {
                /* IE6 does not support max-width, so set a specific width instead */
                width: 200px;
            }
        </style>
    </head>
    <body>


        <p>
            <a href="#" title="The title will appear in an box when the mouse is over the link">Hover over me</a>
        </p>
        <div>
            <input type="text"  title="The title will appear in an box when the mouse is over the link" name="styleSwitcher" placeholder="Hover over me" /><p></p><p></p>
             <dt title="The title will appear in an box when the mouse is over the link">Hover over me </dt>
        </div>

    </body>
</html>

DEMO： http://jsfiddle.net/NVENA/2/

Answer 1

要使代码对具有非title属性的所有元素进行更改，请从

中删除元素名称a

            $('a[title!=""]').each(function() {

制作

            $('[title!=""]').each(function() {

Answer 2

您可以添加如下额外元素：

...

$('a[title!=""], input[title!=""], image[title!=""], td[title!=""], dt[title!=""]').each(function() {

...

http://jsfiddle.net/J3S9e/

更改标题样式jquery - css

2 个答案: