Run html class using JAVASCRIPT : i have html class using two class

    <div class="container"> 

     <div class="black">
       <h1>hello<h1>
      </div>

      <div class="green">
       <h1>hello<h1>
      </div>

    </div>

this is my css

    .black{
       background-color: black;
          }

    .green{
           background-color: green;
          }

iam need `container` `background color` black the mouse hover to class `black` h1.

and `container` `background color` gree the mouse hover to class `green` h1


this is tested java script. but this not work . plz friend help 

     $(document).ready(function() {   
           $(".container).hover(function() {
             $('.green').addClass('display-on');
           });
           $(".container").mouseleave(function() {
             $('.black').removeClass('display-on');
           }); 
       });
    </script>