<div id="Parent_element">
  <b>父元素</b><br> 父元素內文內文內文內文內文內文內文內文
  <br> 父元素內文內文內文內文內文內文內文
  <br> 父元素內文內文內文內文內文內文內文內文內文
  <br><br>
  <div id="Child_element">子元素</div>
</div>
#Parent_element {
  width: 200px;
  background: #64a1df;
  padding: 20px;
  border-radius: 10px;
}

#Child_element {
  background: #ddd;
  margin: 5px;
  padding: 10px;
  border-radius: 10px;
}

window.onload = function() {
  var PE = document.getElementById("Parent_element");
  var CE = document.getElementById("Child_element");

  // 游標碰觸子元素改變父元素背景顏色
  CE.addEventListener(
    "mouseover",
    function(event) {
      PE.style.background = "#97afc8";
    },
    false
  );

  // 游標離開子元素恢復父元素背景顏色
  CE.addEventListener(
    "mouseout",
    function(event) {
      PE.style.background = "#64a1df";
    },
    false
  );
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.