JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blue_block">test</div>
<div class="red_block"></div>

CSS

body {width: 350px; margin: 0 auto}

.blue_block {background: blue; padding: 25px}
.red_block {width: 100%; height: 200px; background: red}
.red_block.active {background: green !important}

JavaScript

var blue_block_h = 0;

$('.blue_block').hover(function() {
	blue_block_h = 1;
}, function() {
	blue_block_h = 0;
});

$('body').hover(function() {
	if(!blue_block_h) {
		$('.red_block').removeClass('active');
  } else {
  	$('.red_block').addClass('active');
  }
});