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

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

就像所有其他关于将它放在一个跨度中的答案一样，但您可以通过纯粹的内容来选择它......

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

工作的jsFiddle

于 2013-10-02T21:59:49.150 回答
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 回答