HTML悬停时突出显示标签

debugcn 发表于 Dev

Trying2LearnMath

给定以下内容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风格

任何帮助，将不胜感激。谢谢！

AmmarCSE

无需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

更新

如果我有多个cpos具有不同ID的标签，并且想在悬停时突出显示单个标签

只需将每个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

此外，无论如何，您可以向我展示如何使用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

有没有一种方法可以类似于您的JavaScript示例，但无需更改cpos标记属性？

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。