如何实现鼠标悬停图片时同时触发图片与文字的两种hover效果

问题原因 #

你的hover伪类绑定在了独立的同级子元素上：

• 鼠标仅在img区域悬停时，只会触发img的hover效果，不会命中中间div的hover规则
• 鼠标移动到中间div区域时，光标脱离img元素，img的hover效果直接失效
  且只有鼠标进入div本身的范围时，才会触发div的hover，所以只有中心区域能唤起文字效果。

解决方案 #

把hover触发条件绑定到两个元素的共同父容器.photo上，只要鼠标进入.photo的范围，就能同时触发两个子元素的交互效果。
你只需要修改CSS中两个hover选择器的规则即可，还可额外补充属性优化显示效果：

/* 补充父容器相对定位和溢出隐藏，确保定位正确、缩放不溢出 */
.photo {
  position: relative;
  overflow: hidden;
  margin: 0;
}

.photo img {
  opacity: 1;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

/* 将hover绑定到父容器，悬停父元素时触发img效果 */
.photo:hover img {
  opacity: 0.7;
  transform: scale(1.13);
}

/* 同理，悬停父元素时触发中间文字层的效果 */
.photo:hover .middle {
  opacity: 1;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  /* 如果不需要点击中间文字可加下面这行，避免文字层阻挡其他交互 */
  /* pointer-events: none; */
}

.text {
  background-color: #8b0000;
  color: white;
  font-size: 16px;
  padding: 16px 16px;
}

.pictures li {
  display: block;
  float: right;
  clear: right;
  position: relative;
  margin-bottom: 2.8rem;
}

内容的提问来源于stack exchange，提问作者Vadventra