javascript - 悬停时 HTML 突出显示标签

Question

给定以下 html:

This is a test to
<cpos data-idcpos="10" data-comment="1"> 
  highlight only this portion of text 
</cpos> and not this

我的任务是只突出显示 cpos 部分。我可以自己突出显示一个 div 类，但对如何执行此操作有点困惑。我正在使用 javascript 以及 css 样式

如有任何帮助，我们将不胜感激。谢谢!

Answer 1

无需javascript，只需使用css :hover

cpos:hover{
  background:yellow;
  }

This is a test to<cpos data-idcpos="10" data-comment="1"> highlight only this portion of text </cpos> and not this

更新

If I had multiple cpos tags with different ids and wanted to highlight an individual one on hover

只需使用 #

定位每个单独的 id

#MyId:hover{
  background:yellow;
  }

This is a test to<cpos data-idcpos="10" data-comment="1"> highlight only this portion of text </cpos> and not this

This is a test to<cpos id="MyId" data-idcpos="10" data-comment="1"> highlight only this portion of text </cpos> and not this

Also, is there anyway you could show me how to do this using javascirpt?

使用onmouseover 和onmouseout 事件

This is a test to<cpos data-idcpos="10" data-comment="1" onmouseover="this.style.background='yellow'" onmouseout="this.style.background=''"> highlight only this portion of text </cpos> and not this

Is there a way to do it similarly to your javascript example but without changing the cpos tag attributes?

是的，遍历它们并以编程方式附加

var elements = document.getElementsByTagName('cpos');
for(var i = 0; i < elements.length; i++){
  elements[i].onmouseover = function(){
    this.style.background = 'yellow';
    }
  elements[i].onmouseout = function(){
    this.style.background = '';
    }
  }

This is a test to
<cpos data-idcpos="10" data-comment="1">
  highlight only this portion of text
</cpos>and not this This is a test to
<cpos data-idcpos="10" data-comment="1">
  highlight only this portion of text
</cpos>and not this This is a test to
<cpos data-idcpos="10" data-comment="1">
  highlight only this portion of text
</cpos>and not this