When using jQuery Mobile, links are styled according to the theme stylesheet. If you want to change this styling, you can use !important as follows:
.glossaryLink{
color: white !important;
background-color: #CC8DCC;
}
I am looking to dynamically change the color of these glossary links. Currently, they are highlighted in purple and we need the option to disable the highlighting.
The script below allows me to adjust the background color, but not the text color:
$(".glossary_option").click(function(){
if(localStorage.glossaryopt=="off"){
localStorage.glossaryopt = "on";
$("#glossary_option").html("Highlighting ON");
$(".glossaryLink").css({
"color":"white",
"background-color":"#CC8DCC"
});
}else{
localStorage.glossaryopt = "off";
$("#glossary_option").html("Highlighting OFF");
$(".glossaryLink").css({
"color":"black",
"background-color":"white"
});
}
});
Although the CSS color property shows black when inspected in Chrome, the text does not actually turn black when the script is activated.
I have attempted to use "black !important" without success. Does anyone know how to achieve this?