JSFiddle - React, Tailwind, and code Playground

by akshatha suchethan

HTML

<li class="static dynamic-children" id="main-menu"><a class="static dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/teams/MA/repository-tools"><span aria-haspopup="true" class="additional-background ms-navedit-flyoutArrow dynamic-children"><span class="menu-item-text">Repository Tools</span></span></a><ul class="dynamic" id="sub-menu" style="z-index: 1100;">
				<li class="dynamic"><a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/teams/MA/repository-tools/monthly-report-submission"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Monthly Report Submission</span></span></a></li><li class="dynamic dynamic-children"><a class="dynamic dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/teams/MA/repository-tools/cmp"><span aria-haspopup="true" class="additional-background ms-navedit-flyoutArrow dynamic-children"><span class="menu-item-text">CMP</span></span></a><ul class="dynamic" style="z-index: 1100;">
					<li class="dynamic"><a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/teams/MA/repository-tools/cmp/submission-review"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Submission / Review</span></span></a></li><li class="dynamic"><a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/teams/MA/repository-tools/cmp/progress"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Progress</span></span></a></li>
				</ul></li><li class="dynamic dynamic-children"><a class="dynamic dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/teams/MA/repository-tools/ma-systems"><span aria-haspopup="true" class="additional-background...

CSS

#parent {
  position: relative;
  background-color: #eee;
  height: 100px;
  width: 300px;
}

#control {
  position: absolute;
  bottom: 0;
}

#control:hover ~ #target {
  background: red;
}

#target {
  border: 1px solid maroon;
  text-align: center;
}

JavaScript

$('li.dynamic').on('mouseover', function(){
  $(this).parent().hasClass('hover');
  $(this).css("color",red");
})
})