jQuery .css() not applying styles to elements with inline styles set by the browser
I'm a bit lost with I've been struggling with this for a few days now and could really use some help... I'm having trouble with the jQuery `.css()` method not overriding inline styles that are set by the browser. I'm using jQuery version 3.6.0. For example, I have a button that I want to change its background color when it's clicked. It has an inline style set by the browser due to a CSS transition effect. Here's the code snippet I am using: ```javascript $(document).ready(function() { $('#myButton').on('click', function() { $(this).css('background-color', 'red'); }); }); ``` However, when I click the button, it doesn't change the background color to red. I checked the computed styles in the browser, and the inline style seems to take precedence, resulting in the button maintaining its original color. I also tried using `!important` in the `.css()` method like this: ```javascript $(this).css('background-color', 'red !important'); ``` But that didn't work either, and I received the behavior `Uncaught behavior: Invalid property value`. Is there a way to force jQuery to apply the style correctly, or is there a better practice for handling this scenario? Any insights would be appreciated! I'd really appreciate any guidance on this. I'm coming from a different tech stack and learning Javascript. Any ideas how to fix this?