css hover override using only css and JS

Question

I have a code that i can only edit the CSS and the JS. The problem is that the page loads a default css that cannot be altered but you can run an alternative css and JS to add content to a page and modify the css. So i guess the css that is loaded overrides the default one. But the problem is that you can't just say

a:hover {
background-color: red;
}

You would have to reset background color with none and add underline and stuff.

so how can i tell my css to put my *:hover important over any else and remove the default hover?

Answer 1

The css may be too nested. Adding an !important tag would help. But it's more semantic to follow the train of elements. Right click the element you want to style. When you're looking at the editor, you'll see the specificity on the right side (where the css is) and then you can copy the selector they have. Using this selector should allow you to overwrite any styles necessary.

Far top right of the image. The .container is the overall class used here. In some cases you may see something like. (From Foundation)

.top-bar-section li:not(.form) a:not(.button)

Answer 2

Add following in your CSS and make sure you load it after default CSS.

a:hover {
     background-color: NONE !important;
}

Using Javascript

$('body').append('<style>a:hover { background-color: none !important; }</style>');