Question

我正在尝试使用一个简单的hover来处理特殊字符作为选择器。

我正在使用double-daggers（‡‡）特殊字符

ASCII 8225并希望将这些功能作为工具提示，但我实际上让他们解雇事件时遇到了麻烦。

JSFiddle here点击操作而非悬停以简化：

我错过了什么？我觉得这应该很简单。

也许这只是工作日的结束。

Answer 1

您不能使选择器找到一个字符，因为选择器只能找到元素。

将角色包裹在您可以定位的元素中。例如：

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

然后你可以找到元素：

$("#asdf").click(function() { alert('hovered'); });

Answer 2

$（＆＃34;‡＆＃34;）不是合法的jQuery选择器。尝试将其包装在带有类的范围中，然后选择它。

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

$(".tooltip").click(function() { alert('clicked'); });

Answer 3

CSS选择器定位DOM元素。你不能只用它们选择文本，因此你无法使用jQuery实现它。您需要将其包装在<span>标记中：

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

HTML：

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

jQuery的：

$(".tooltip").click(function() { 
    console.log('clicked'); 
});

Answer 4

正如所有其他答案一样，将它放在一个范围内，但你可以纯粹选择内容......

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

<强> Working jsFiddle

Answer 5

您是否考虑过使用jQueryUI tooltip widget？

它允许您设置任何元素以获得工具提示，只需指定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>

jquery特殊字符作为seelector

5 个答案: