CODEWITHSUNDEEP
jquerycssjquery-mobilehyperlink
adamuiowa
adamuiowa

Reputation: 57

jQuery Mobile custom link CSS style

I'm having an issue getting custom link styles to work when dropped in the jQuery Mobile CSS file that I downloaded.

Here is an example of two types of code I'm using:

.body A:link {color: #5f8bff; text-decoration: none}
.body A:visited {color: #5f8bff; text-decoration: none}
.body A:active {color: #5f8bff; text-decoration: none}
.body A:hover {color: #5f8bff ; text-decoration: underline; color: #ffffff;}

.body2 A:link {color: #e1d34b; text-decoration: none}
.body2 A:visited {color: #e1d34b; text-decoration: none}
.body2 A:active {color: #e1d34b; text-decoration: underline}
.body2 A:hover {color: #5f8bff; text-decoration: underline; color: #ffffff;}

This code isn't responding when placed in a <span class="body"> and <span class="body2">.

The example URL is here: www.camavision.com/wp/jquery

Any suggestions? I'm trying to create three different types of link styles to override the current CSS.

Upvotes: 1

Views: 4974

Answers (1)

haz0rd
haz0rd

Reputation: 270

as long as your custom CSS is loaded last, and your CSS is specific enough, then it should be overriding anything before it.

Make sure you are referencing the right stuff by putting a "!important" next to it. for example

.body2 A:link {color: #e1d34b !important; text-decoration: none}

If that works, then you are pointing at the right place but aren't being specific enough or loading it in incorrect order.

NOTE: Don't actually use the !important unless absolutely necessary, just use it to further troubleshoot

EDIT:

try adding .ui-link to your a tag

    .body2 a.ui-link {color: #e1d34b; text-decoration: none}

to all your statements

Upvotes: 2

Related Questions