Question

我正在尝试编写一些jQuery代码，通过在其周围添加边框来突出显示光标当前悬停的元素。这是我到目前为止的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hover Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
    $(function() {
        $("*:not(html, head, body)").hover( function () {
            $(this).css("border", "2px solid purple");
        }, 
        function () {
            $(this).css("border", "none");
        }).click( function () {
            alert($(this).html());
        });
    });
</script>
</head>

<body>
<div>
    <p>This is paragraph one</p>
    <p>This is paragraph two</p>
</div>
<span id="curtag"></span>
</body>
</html>

问题是，当我将鼠标悬停在下面示例中的段落之类时，它还会突出显示父标记，在这种情况下为div。另外，当我点击段落时它会给我p的html然后是div的html，但是，我只想要p标签中的html。有关如何解决此问题的任何建议吗？

Answer 1

添加

return false;

像这样

$(function() {
    $("*:not(html, head, body)").hover( function () {
            $(this).css("border", "2px solid purple");
    return false;
    }, 
    function () {
            $(this).css("border", "none");
    }).click( function () {
            alert($(this).html());
            return false;
    });
});

停止将mouseOver事件冒泡到父级。

Answer 2

你在允许触发hover（）事件的元素方面过于笼统。当你说the element the cursor is currently hovering over时，它指的是几个嵌套元素，这些元素恰当地都是边界元素。

如果你只想在<p>中找到文字，为什么不让它们单独触发边框？

$('p').hover(function() { etc.....

使用jQuery“突出显示”光标下的内容

2 个答案: