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"); }); }); });No entiendo exactamente lo que estás buscando. Tal vez usted podría proporcionar más detalles.
Aquí hay una demostración iniciada a partir de su código con algunos cambios agregados.
$(document).ready(function () { $(".onClickThis, .fadeThis").hide(); $(".btn").hover(function () { $(".imageOne").fadeIn("slow", function () { $(".onClickThis, .fadeThis").fadeIn( 250 ); $(".btn").fadeOut(); }); }); }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <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> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>