HTML Highlighting Tags On Hover

Question

Given the following html :

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

My task is to highlight only the cpos portion. I am able to highlight a div class on my own, but a little confused on how to do this. I am using javascript along with a css style

Any help would be appreciated. Thanks!

Answer 1

No javascript needed, just use 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 

Update

If I had multiple cpos tags with different ids and wanted to highlight an individual one on hover

Simply target each individual id with #

 #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?

Use onmouseover and onmouseout events

 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?

Yes, iterate through them and attach programmatically

 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

You can use CSS. Make use of a 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

:hoverWhat you have to do is assign a class to the cpos, in other scenario you can even use SPAN that are like this is big .. the end

For your code, add the class as follow:

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

in CSS

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

Answer 4

I made a good highlighting example With Animation for You :) using CSS : No javascript needed

Your 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> 

and here it is on JSfiddle: http://jsfiddle.net/ebramatef/Lfd98v9m/