HTML高亮标签悬停

HTML Highlighting Tags On Hover

本文关键字：悬停 标签 高亮 HTML      更新时间：2023-09-26

给定以下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样式

任何帮助都会很感激。谢谢!

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

你可以使用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

: 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;
}

我做了一个很好的高亮动画的例子。使用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/

相关文章：