Make hyperlink underline appear on mouseover (currently the opposite)

Question

I am wanting to imitate this website, which only underlines a hyperlink once the user hovers over the link.

Currently in my Magento store, any hyperlinks are already underlined before the user hovers over it & when the user does hover over the link, the underline is removed.

So basically, I want the very opposite of what is happening.

I am using Modern theme f001. Can anyone explain how I could go about changing this?

Answer 1

You need to change in the CSS file of your theme:

http://www.efficienttrade.co.nz/media/css/2221f7ff45d5b039dfab39cc684c3166.css

Line 1178:

a {
   color: #1E7EC8;
   text-decoration: none; // changed from text-decoration:underline
}

Line 131

a:hover {
   text-decoration: underline; // changed from text:decoration:none
}

Please note that the line numbers might be wrong and you might need to search for the a class definition in the CSS file in order to change them.