[英]JS CSS font color and underline
I would like to change css for the font. 我想更改字体的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>
As what I understand this used 'chbg' to change background color, 据我了解,它使用“ chbg”来更改背景颜色,
If I want to make the font underline + font color how could I applied to this. 如果我想使字体加下划线+字体颜色,该如何应用。
Here is live fiddle http://jsfiddle.net/NAuxn/ 这是现场小提琴http://jsfiddle.net/NAuxn/
With this function you can change the font color and the underline: http://jsfiddle.net/NAuxn/4/ 使用此功能,您可以更改字体颜色和下划线: http : //jsfiddle.net/NAuxn/4/
function chbg(color, id) {
document.getElementById(id).style.color = color;
document.getElementById(id).style.textDecoration = "underline";
}
Add additional parameter in your function call. 在函数调用中添加其他参数。 So that it will remain the same style when hover out.
这样当悬停时它将保持相同的样式。
HTML 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 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')
. 在上面的代码中,我使用了
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. 第三个将说明
text-decoration
样式,第四个将指出您希望将鼠标悬停在哪种颜色上。
In the mouseout I have rolled back to the normal style. 在mouseout中,我已恢复为正常样式。 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.
我建议您创建一个具有悬停样式的类,并将其应用于mouseover并在mouseout上将其删除。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.