Question

I have the following two styles in a stylesheet that I do not have access to:

a:link {
  font-size: 150%;
}

a:hover {
  font-size: 150%;
}

Using jQuery, how can I change the font-size here to 100% for both a:link and a:hover.

Answer 1

@Phil is correct in his comment above, a rule can be added directly. A <style/> element can be appended at runtime to <head/> which will trigger a page re-render (?) and the new styles will be applied! From the fiddle:

$('head').append('<style type="text/css">a:hover{color:red !important;}</style>');

For some reason the head selector doesn’t look right to me but hey, it works! Hover over the link in 5 seconds time (for argument’s sake) and it’ll be styled.