<div class="container">

  <p id="title"> MouseOver Bubbling Test </p>

  <div class="wrapper">

    <div class="outer" id="outer-1">

      <p> outer #1</p>

    </div>

    <div class="outer" id="outer-2">

      <p> outer #2</p>

      <div class="inner" id="float">my parent is outer #2 </div>

    </div>

  </div>

</div>

.container {

  margin: 5px auto;

  padding: 5px;

  width: 500px;

  height: 230px;

  border: solid 2px black;

  text-align: center;

​

  .wrapper {

    display: flex;

    flex-direction: row;

  }

}

​

.outer {

  width: 220px;

  height: 150px;

  margin: auto;

  background-color: #cfa;

  position: relative;

}

​

.inner {

  width: 180px;

  height: 100px;

  margin: auto;

  background-color: #fca;

  // pointer-events: none;

}

​

#float {

  position: absolute;

  left: -220px;

}

​

const outer1 = document.getElementById("outer-1");

const outer2 = document.getElementById("outer-2");

​

function highlight(e) {

  e.currentTarget.style.backgroundColor = "blueviolet";

}

​

function dehighlight(e) {

  e.currentTarget.style.backgroundColor = "#cfa";

}

​

// you can change mouseover --> click

outer1.addEventListener("mouseover", highlight);

outer1.addEventListener("mouseout", dehighlight);

outer2.addEventListener("mouseover", highlight);

outer2.addEventListener("mouseout", dehighlight);

​