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 class，但对如何执行此操作有点困惑。我正在使用 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

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 分配一个 class，在其他情况下你甚至可以使用像这样的 SPAN 这是大..结束

对于您的代码，添加 class 如下：

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 悬停时突出显示标签

HTML Highlighting Tags On Hover

html

javascript

css

tags