javascript - JS CSS 字体颜色和下划线

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>

据我了解，这使用“chbg”来更改背景颜色，

如果我想使字体下划线+字体颜色，我该如何应用。

这是现场 fiddle http://jsfiddle.net/NAuxn/

Answer 1

在您的函数调用中添加额外的参数。这样悬停时它会保持相同的样式。

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 中，我已经恢复到正常样式。这是使用您的代码的解决方案。我建议您创建一些具有悬停样式的类，并在鼠标悬停时应用它并在鼠标移开时将其删除。

DEMO