CSS选择器鼠标上移冒泡机制

当鼠标悬停在 父级div 或其内部元素上时，都会触发某些样式（比如外边框的阴影效果），这是因为CSS选择器使用了冒泡机制。
将原来的 .div_wrap :hover（注意中间有空格）改为 .div_wrap:hover

　　- 原选择器表示div_wrap内部的任何元素悬停时都会触发

　　- 新选择器表示只有div_wrap容器本身悬停时才触发

存在冒泡机制：

.div_wrap :hover {
  border-radius: 10px;
  background: #f0f6fe;
  cursor: pointer;
  box-shadow: 2px 4px 4px 0px rgb(204, 214, 230);
}

效果如下图：

 

 移除冒泡机制：

.div_wrap:hover {
  border-radius: 10px;
  background: #f0f6fe;
  cursor: pointer;
  box-shadow: 2px 4px 4px 0px rgb(204, 214, 230);
}
效果如下图：