jQuery - hidden class is not being displayed with fadeIn-CodePudding

I have a hidden class fadeThis, which does not appear when I hover over the button. Perhaps it is clashing with another class/div?

What I'm essentially trying to do is create a red fade in over the grey box, when the cursor hovers over the button, and then when the cursor leaves the box(not the button), I want it to return back to it's original state.

I've also added the CSS to help demonstrate

HTML

    <div >

        <div > <!-- hidden by default-->
            <h2 >Whatever the text needs to be</h2> <!-- hidden by default-->
        </div>
        <div >
            <button >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");

        });
    });

});

CodePudding user response：

I don't understand exactly what you are looking for. Maybe you could provide more details.

Here is a demo started from your code with some changes added.

$(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 >
  <div > <!-- hidden by default-->
      <h2 >Whatever the text needs to be</h2> <!-- hidden by default-->
  </div>
  <div >
      <button >View More</button>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>