JS CSS font color and underline

Question

I would like to change css for the font.

<div id="a" onmouseover="chbg('red','b')" onmouseout="chbg('white','b')">This will change b element</div>
<div id="b">This is element b</div>

<div id="f" onmouseover="chbg('blue','g')" onmouseout="chbg('white','g')">This will change g element</div>
<div id="g">This is element g</div>

<div id="j" onmouseover="chbg('yellow','k')" onmouseout="chbg('white','k')">This will change k element</div>
<div id="k">This is element k</div>

As what I understand this used 'chbg' to change background color,

If I want to make the font underline + font color how could I applied to this.

Here is live fiddle http://jsfiddle.net/NAuxn/

score 3 · Answer 1 · answered Jul 24 '14 at 05:57

3

With this function you can change the font color and the underline: http://jsfiddle.net/NAuxn/4/

function chbg(color, id) {     
  document.getElementById(id).style.color = color;
  document.getElementById(id).style.textDecoration = "underline";                        
}

answered Jul 24 '14 at 05:57

Marcos Aguayo

6,840
8
28
61

1

The problem in your solution is all the time the underline will be visible on normal mode. I mean mouse out. – Suresh Ponnukalai Jul 24 '14 at 06:05
now whend he do a mouseover the underline won't be reseted to normal by the mouseout – Synoon Jul 24 '14 at 06:06
1

If he want to reset the styles after mouseover, why don't use CSS? – Marcos Aguayo Jul 24 '14 at 06:12

score 3 · Accepted Answer · answered Jul 24 '14 at 06:04

Add additional parameter in your function call. So that it will remain the same style when hover out.

HTML

 <div id="a" onmouseover="chbg('red','b','underline','white')" onmouseout="chbg('white','b','none','black')">This will change b element</div>
 <div id="b">This is element b</div>

 <div id="f" onmouseover="chbg('blue','g','underline','white')" onmouseout="chbg('white','g','none','black')">This will change g element</div>
 <div id="g">This is element g</div>

 <div id="j" onmouseover="chbg('yellow','k','underline','white')" onmouseout="chbg('white','k','none','black')">This will change k element</div>
 <div id="k">This is element k</div>

JQUERY

function chbg(color, id, td, fc) { 
document.getElementById(id).style.backgroundColor = color;
document.getElementById(id).style.textDecoration = td;
document.getElementById(id).style.color = fc;
}

In the above code I have used four parameters like chbg('red','b','underline','white'). The third one will tell the text-decoration style and the fourth one will point which color you want on mouse over.

In the mouseout I have rolled back to the normal style. This is the solution for using your code. I would suggest you to create some class with hover style and apply it on mouseover and remove it on mouseout.

DEMO

JS CSS font color and underline

2 Answers2