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

<强>更新

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

只需使用#

定位每个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

Answer 2

您可以使用CSS。使用class。

CSS：

.highlight:hover{ //Use HOVER
    background-color:yellow;
}

HTML：

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

Answer 3

：hover你要做的就是为cpos分配一个类，在其他情况下，你甚至可以使用类似SPAN的类这很大..结束

对于您的代码，请按以下方式添加类：

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

CSS中的

.hightlight:hover{
     background-color: yellow;
}

Answer 4

我用动画为你做了一个很好的突出示例:) 使用CSS：不需要javascript

你的CSS：

html, body {
  height: 100%;
}

body {
  background: #2c3e50;
  display: flex;
}

.card {
  width: 350px;
  padding: 30px;
  background: #1abc9c;
  margin: auto;
  transition: .3s ease;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.card:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
  transform: translateY(-10px) scale(1.02);
}
.card:hover .entry-title {
  background-position: -100% 0;
}

.entry-title {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #16a085 50%);
  background-size: 200%;
  background-position: 0 0;
  display: inline;
  transition: .5s ease-in-out;
  font-family: raleway, arial, sans-serif;
  text-transform: uppercase;
}
.entry-title cpos {
  color: white;
  text-decoration: none;
}

<div class="card">
<h1 class="entry-title">
<cpos><a>This text will be highlighted when hovered</a></cpos>
</h1>
</div>

这里是JSfiddle：http://jsfiddle.net/ebramatef/Lfd98v9m/

HTML在悬停时突出显示标记

4 个答案: