1

如何查找鼠标是否悬停在 div 中的特定字符串上？

例如，检测鼠标是否悬停在名为“Jay-Z 于 2008 年与美国 R&B 歌手 Beyoncé Knowles 结婚”的字符串中的单词“Jay-Z”上

4

2 回答 2

2

这是一个快速的 JQuery 方法。首先，我们查看所有 div 并在其中查找 Jay-Z 一词。并用“jay-z”类将它包装在一个跨度中。

$( 'div' ).each(function( i ) {
    $( this ).html( $( this ).html().replace( /(Jay-Z)/g,'<span class="jay-z" >$1</span>' ) );
});

然后我们为类 jay-z 的 div 中的 span 上的鼠标悬停分配一个事件处理程序。

$( "div" ).on( "mouseover", '.jay-z', function() {
  alert( "Hey, it's Jay-z" );
  //do something
});

现场示例http://jsfiddle.net/eLJmd/

于 2013-10-12T17:46:24.803 回答
0

最简单的方法是将您感兴趣的字符串放在一个元素中，例如span：

<span class="special">Jay-Z</span> married American R&amp;B singler Beyoncé Knowles in 2008

然后，您可以捕获该mouseover跨度/那些跨度上的事件。

如果您需要在不将它们放入span（或类似的）中的情况下进行操作，则要困难得多。你必须创建一个应用了相同样式的元素，测量它的大小，然后找出它在包含文本的整个元素中的位置。

如果在最初生成 HTML 时不能这样做，请注意在span加载 DOM 后将一些文本放入 a 中并不是特别难。

您可以在标记中执行此操作，但这将删除已连接到现有元素的任何事件处理程序：

var p = $("selector for the elment containing that text");
p.html(p.html().replace(/Jay-Z/g, "<span>Jay-Z</span>"));

...或者（如果可能附加了处理程序，这会更好）您可以遍历 DOM 节点以查找包含该文本的文本节点，并将它们放入span元素中：

function putInSpan(node, text) {
    var child, next, index, second, matchNode;

    switch (node.nodeType) {
        case 1: // Element
            for (child = node.firstChild; child; child = next) {
                next = child.nextSibling;
                putInSpan(child, text);
            }
            break;

        case 3: // Text node
            while (node !== next && (index = node.nodeValue.indexOf(text)) !== -1) {
                matchNode = node.splitText(index);
                matchNode.splitText(text.length);
                span = document.createElement('span');
                span.className = "special";
                node.parentNode.insertBefore(span, matchNode);
                span.appendChild(matchNode);
                node = span.nextSibling;
            }
            break;
    }
}

实例| 直播源

它直接使用 DOM 而不是 jQuery，因为 jQuery 主要是面向元素的，为此我们需要直接处理文本节点。

于 2013-10-12T17:24:00.937 回答