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

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

       $(function() { $("*:not(html, head, body)").hover( function () { $(this).css("border", "2px solid purple"); }, function () { $(this).css("border", "none"); }).click( function () { alert($(this).html()); }); });    
 
This is paragraph one
 
This is paragraph two
 
    

问题是，当我将鼠标hover在下面示例中的段落之类时，它还会突出显示父标记，在这种情况下为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').hover(function() { etc.....