Cancelling a CSS rule

Question

Let's say we have the following CSS default rule X, declared in a WordPress child theme:

.btn { background: url("btn.jpg"); }

And this rule Y, declared in commercial parent WordPress theme:

.btn:hover { background: gray; }

Can I somehow tell the browser "ignore Y", so that nothing will happen when hovering the .btn element?

Answer 1

I think your only option is overriding the value of .btn:hover with the same value as .btn:

.btn:hover { background: url("btn.jpg"); }

.btn { background: red; }
.btn:hover { background: blue; }
/* ... */
.btn:hover { background: red; }

<div class="btn">Foo</div>