我怎样才能在div后面划一条线而不是在css中悬停？

Question

这是正常状态，该行在div后面

这是悬停状态，该线显示

Answer 1

您的.listing在:hover

上具有背景透明度

0.17以下的css意味着它的不透明度为17％;将其更改为1，它将是不透明的。您可能希望将实际的悬停颜色更改为更轻的颜色。

#timeline .listing:hover {
    cursor: pointer;
    border: 1px solid #9fa3aa;
    background: rgba(217, 217, 217, 0.17);
}

Answer 2

在悬停状态下，div具有背景，其中alpha通道（范围从0 =完全透明到1 =完全不透明）设置为0.17，这是非常透明的。因此，它背后的线显示出来。它在默认状态下不可见，因为在非悬停状态下，div的背景定义没有透明度。

集

#timeline .listing:hover {
  cursor: pointer;
  border: 1px solid #9fa3aa;
  background: rgba(217, 217, 217, 0.17); }

到

#timeline .listing:hover {
  cursor: pointer;
  border: 1px solid #9fa3aa;
  background: rgba(217, 217, 217, 1.0); }

并且div后面的行应该消失，因为它被div“覆盖”。