0

Navigation can't be edited directly and the .active menu item is swapped out with a ::before pseudo element.

.rel a is an overlay to make it working button, but needs matching hover effect.

For positioning the div.rel is collapsed

li {
  margin: 4px;
  width: 200px;
  background-color: #bbb;
  height: 30px;
  list-style: none;
  text-align: center;
}

li.active::before {
  content: '4';
}

li.active a {
  visibility: hidden;
}

ul li.active::before {
  background-color: green;
}

div.rel a:hover~ul li.active::before {
  background-color: yellow;
}

div.rel {
  position: relative;
}

div.rel a {
  position: absolute;
  width: 200px;
  height: 20px;
  background: red;
  color: #fff;
}
<!-- nav code can't be edited -->
<ul class="nav">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="active"><a href="#">4</a></li> <!-- <<<<  This 4 needs to turn yellow when you hover the red button -->
</ul>
<!-- nav code can't be edited -->
<div class="rel">
  <a class="overlay" href="#">Hover here turn 4 yellow</a>
</div>
GibsonFX
  • 1,000
  • 2
  • 10
  • 33

0 Answers0