Tengo una clase oculta fadeThis , que no aparece cuando paso el mouse sobre el botón. ¿Quizás está chocando con otra clase/div?

Básicamente, lo que estoy tratando de hacer es crear un fundido rojo sobre el cuadro gris, cuando el cursor se desplaza sobre el botón y luego, cuando el cursor sale del cuadro (no del botón), quiero que vuelva a su estado original. estado.

También agregué el CSS para ayudar a demostrar

HTML

 <div class="imageOne"> <div class="onClickThis"> <!-- hidden by default--> <h2 class="fadeThis">Whatever the text needs to be</h2> <!-- hidden by default--> </div> <div class="centerButton"> <button class="btn">View More</button> </div> </div>

CSS

 .imageOne{ height: 300px; width: 400px; background-color: grey; } .centerButton{ display: flex; justify-content:center; padding-top:150px; } .btn{ height: 30px; width:170px; } .onClickThis{ height: 300px; width: 400px; background-color: tomato; }

JavaScript

 $(document).ready(function () { $(".onClickThis").hide(); $(".fadeThis").hide(); $(".btn").hover(function () { $(".imageOne").fadeIn("slow", function () { $(this).addClass("fadeThis onClickThis"); $(".btn").remove(); }); $(".onClickThis").mouseleave(function () { $(this).removeClass("fadeThis onClickThis"); }); }); });