悬停时 HTML 突出显示标签答案

【问题标题】：HTML Highlighting Tags On Hover悬停时 HTML 突出显示标签
【发布时间】：2015-06-05 15:27:27
【问题描述】：

鉴于以下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 html css tags

【解决方案1】：

无需 javascript，只需使用 css :hover

cpos:hover{
  background:yellow;
  }

This is a test to&lt;cpos data-idcpos="10" data-comment="1"&gt; highlight only this portion of text &lt;/cpos&gt; 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

另外，您是否可以向我展示如何使用脚本？

使用onmouseover 和onmouseout 事件

This is a test to&lt;cpos data-idcpos="10" data-comment="1" onmouseover="this.style.background='yellow'" onmouseout="this.style.background=''"&gt; highlight only this portion of text &lt;/cpos&gt; 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

【讨论】：

两个问题，感谢您的快速帮助！如果我有多个具有不同 id 的 cpos 标签，并且想在悬停时突出显示一个单独的标签，我该怎么做。另外，您是否可以向我展示如何使用 javascirpt 做到这一点？
@Trying2LearnMath，当然，有什么问题？
非常感谢。按照这种设置方式，我将转到一个页面，其中有 1 到 100 个 cmets，所有这些 cmets 都带有一个 cpos 标签和一个唯一 ID。我了解您描述的方式需要每个 cpos 标签都有一个固定的“MyId”，对吗？无论如何，是否允许每个 cpos 标签单独突出显示，而不管 ID 编号如何
@Trying2LearnMath，它可以是任何 id，不一定是“MyId”。关于个人突出显示，Id是最简单的方法
对不起，最后一个问题。之前的代码很有帮助！没想到就这么简单。有没有办法与您的 javascript 示例类似但不更改 cpos 标签属性？目前的设置方式，我无法编辑属性。

【解决方案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

【讨论】：

是否需要使用类？现在所有设置的方式，这是发送给我的确切代码，如果我不必将其归类为一个类，将会很有帮助。
@Trying2LearnMath 这不是强制性的，但我总是更喜欢一门课，因为它表明了你的意图。

【解决方案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;
}

【讨论】：

【解决方案4】：

我用 Animation for You 做了一个很好的高亮示例 :) 使用 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/

【讨论】：