求助：Div类表格无法实现单一行Hover高亮效果

咱们来一步步排查你遇到的问题哈：

问题1：DOM结构错误（导致选中所有行） #

看你的HTML代码，第一个.row标签没有闭合！后面的所有.row都被嵌套进第一个里面了，所以你hover的时候会触发父元素的hover事件，把所有子行都带起来。
修复方法：给第一个.row补上闭合标签，位置在第一个.four的闭合标签之后：

<div class="four">
  <h3> Work Due </h3>
</div>
<!-- 补上缺失的.row闭合标签 -->
</div>

问题2：浮动导致父元素高度塌陷（hover触发不了） #

你的.row里的子元素都是float:left，但.row没有清除浮动，这会导致父元素高度塌陷成0——也就是说，你看到的红色区域其实是子元素撑起来的，.row本身没有实际高度，鼠标根本hover不到它！
解决方法推荐用伪元素清除浮动，给.row添加如下样式：

.row::after {
  content: "";
  display: table;
  clear: both;
}

这样.row就能正确包裹住浮动的子元素，拥有实际高度，hover事件就能正常触发了。

问题3：Hover样式无视觉变化 #

你当前的.row:hover设置的背景色和默认.row一样都是red，就算触发了也看不出来！改成一个有区分度的颜色，比如：

.row:hover {
  background-color: darkred;
}

额外优化：让整行子元素同步hover效果 #

现在子元素的背景色（白、绿）会盖住.row的背景色，hover时只能看到子元素缝隙变色。如果想要整行包括子元素都同步高亮，可以修改为：

.row:hover .one,
.row:hover .two,
.row:hover .three,
.row:hover .four {
  background-color: darkred;
  /* 也可以给每个子元素设置不同的hover色，按需调整 */
}

把这些修改完成后，你的单行hover高亮就能正常工作啦！

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