JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
		<div class="inner"></div>
	</div>
	<div class="outer2">
		<div class="inner"></div>
	</div>
	<p>問題：如果是要inner:hover時父層的outer變顏色該怎麼弄?</p>
<div class="outer3">
		<div class="inner"></div>
	</div>

CSS

.outer, .outer2, .outer3{
			width: 500px;
			height: 500px;
			margin-top: 20px;
			background: #ccc;
			border: 2px solid #ccc;
		}

		.inner {
			width: 300px;
			height: 300px;
			margin: 100px auto;
			background:#fff;
			border: 2px solid #777;
		}

		.inner:hover { background:#777; }
		.outer2:hover .inner { background:#777; }

		p {
			font-size: 200%;
			font-weight: bolder;
		}
.hoverParent{
    background-color: #FFEEAA;
}

JavaScript

$(function(){
    $(".inner").hover(function(){
        $(this).closest(".outer3").addClass("hoverParent");
    }, function() {
    $( this ).closest(".outer3").removeClass( "hoverParent" );
  });
});