0

hover特別な文字をセレクターとして簡単に操作できるようにしようとしています。

double-daggers( ‡ ‡) 特殊文字を使用しています

ASCII 8225 であり、これらをツール ヒントとして機能させたいのですが、実際にイベントを発生させるのに問題があります。

簡単にするために、ホバーの代わりにクリックアクションを使用して JSFiddleをここに：

私は何が欠けていますか？これはシンプルであるべきだと思います。

多分それはちょうど仕事の終わりです。

4

5 に答える 5

4

セレクターは要素のみを検索できるため、文字を検索するセレクターを作成することはできません。

ターゲットにできる要素でキャラクターをラップします。例：

<span id="asdf">&#8225;</span>

次に、要素を見つけることができます：

$("#asdf").click(function() { alert('hovered'); });
于 2013-10-02T21:51:44.507 に答える
1

スパンに入れることに関する他のすべての回答と同様に、純粋にコンテンツによって選択できます...

$("span").filter(function() {
    return this.innerText == "‡";
}).on("mouseover", function() { alert('hovered'); });

ワーキングjsFiddle

于 2013-10-02T21:59:49.150 に答える
1

CSS セレクターは DOM 要素をターゲットにします。それらを使用してテキストだけを選択することはできないため、jQuery を使用してそれを取得することはできません。<span>タグでラップする必要があります。

http://jsfiddle.net/BYossarian/xdS7V/3/

HTML:

<span class="tooltip">&#8225;</span>

jQuery:

$(".tooltip").click(function() { 
    console.log('clicked'); 
});
于 2013-10-02T21:52:41.793 に答える
1

$("‡") は正当な jQuery セレクターではありません。クラスでスパンにラップしてから、それを選択してみてください。

<span class="tooltip">&#8225;</span>

$(".tooltip").click(function() { alert('clicked'); });
于 2013-10-02T21:52:13.530 に答える
1

jQueryUI ツールチップ ウィジェットの使用を検討しましたか?

title="Text for the tooltip goes here"属性を指定するだけで、任意の要素にツールチップを設定できます。

サンプルコード:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <script type="text/javascript">
            $(document).ready(function() {
                $( document ).tooltip();
            });
        </script>
    </head>
    <body>

        <p>Using your daggar<span title="This is a tooltip">&#8225;</span> symbol.</p>
        <p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
        the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>

        <p>But as it's not a native tooltip, it can be styled. Any themes built with
        <a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
        will also style tooltips accordingly.</p>

        <p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>

        <p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>

        <p>Hover the field to see the tooltip.</p>

    </body>
</html>
于 2013-10-02T22:03:07.647 に答える