<div class="parent">
  <p>parent and sibling changed!</p>
  <div class="child">
    I am child
  </div>
</div>

* {
  box-sizing : border-box;
  margin : 0;
  padding : 0;
  font-family : 'Century Gothic',sans-serif;
}

.parent {
  pointer-events : none;//親要素エリアはポインターイベントをキャンセル
  transition : all 0.5s ease-in-out;
  position : relative;
  width : 300px;
  height : 350px;
  margin : 1em auto;
  text-align : center;
  color : #fff;
  border : 1px solid #ccc;
  border-radius : 5px;
}

.parent p {
  position : absolute;
  top : 50%;
  left : 50%;
  transform : translate(-55%,-55%);
  font-size : 1.5em;
  line-height : 1.5;
  opacity : 0;
  transition : all 0.5s ease-in-out;
}

//親要素のイベント
.parent:hover {
  background : #323232;
}

//兄弟（兄）要素のイベント
.parent:hover p {
  transform : translate(-50%,-50%);
  opacity : 1;
}

.child {
  pointer-events : auto;//子要素エリアにポインターイベントを設定
  position : absolute;
  bottom : 1em;
  left : 0;
  right : 0;
  margin : auto;
  width : 130px;
  line-height : 2.5;
  text-align : center;
  color : #fff;
  border-radius : 5px;
  background : #e04141;
  cursor : pointer;
  transition : all 0.3s ease-in-out;
}

//子要素は普通にイベント設定
.child:hover {
  color : #323232;
  background : #fff;
}