How to make a dotted underline link on hover?

[LullyDottom]

I have a link \[code\]<a class="link-articles" href="http://stackoverflow.com/questions/15485387/#articles">My Articles</a>\[/code\]and my css \[code\].link-articles { text-decoration: underline; color: blue; }\[/code\]However, on hover I would like to have instead of blue underline a red underline, but the text should remain blue and only the underscore change color to red.How to do such thing?