Question

我想更改字体的css。

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

据我所知，这用过＆＃39; chbg＆＃39;改变背景颜色，

如果我想将字体加下划线+字体颜色，我怎么能应用于此。

这是现场小提琴http://jsfiddle.net/NAuxn/

Answer 1

使用此功能，您可以更改字体颜色和下划线： http://jsfiddle.net/NAuxn/4/

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

Answer 2

在函数调用中添加其他参数。因此，当它悬停时它将保持相同的风格。

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

在上面的代码中，我使用了四个参数，如chbg('red','b','underline','white')。第三个将告诉text-decoration样式，第四个将指出鼠标悬停所需的颜色。

在mouseout中我已经回归到正常风格。这是使用代码的解决方案。我建议你创建一些具有悬停样式的类，并将其应用于鼠标悬停并在mouseout上删除它。

DEMO

JS CSS字体颜色和下划线

2 个答案: