My HTML class has two classes
$(document).ready(function() {
$(".container").hover(function() {
$('.green').addClass('display-on');
});
$(".container").mouseleave(function() {
$('.black').removeClass('display-on');
});
});.black {
background-color: black;
}
.green {
background-color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="black">
<h1>hello
<h1>
</div>
<div class="green">
<h1>hello
<h1>
</div>
</div>I want the background color of container to be black when hovering over the h1 with class black.
And the background color of container should be green when hovering over the h1 with class green.
The code provided is not functioning correctly.