CSS显示网格悬停边框颜色变化

Question

我希望创建一个如下所示的简单表格。当行悬停在其上时，我很难将行的边框更改为红色......只要该行不是标题行。因此，如果它具有 “网格标题行” 类，那么当您将鼠标悬停在其上时不会发生任何事情。然而，对于数据行，即类是“网格”整个行边框（以黑色显示）会将其边框颜色更改为红色。

我正在这个 css/html 上下文中尝试

.grid {
  display: grid;
  grid-template-columns: 15% 10% 25% 25% 25%;
  > * {
    height: 5.125rem;
    text-align: left;
    &:first-child {
      border-radius: 0.5rem 0 0 0.5rem;
      text-align: left;
      padding-left: 1rem;
    }

    &:last-child {
      border-radius: 0 0.5rem 0.5rem 0;
    }
    margin-bottom: 0.5rem;
  }
  &:not(.headers-row) > * {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    &:first-child {
      justify-content: center;
    }
    border: 1px solid black;
    border-left: 0;
    border-right: 0;
    &:first-child {
      border-left: 1px solid black;
    }
    &:last-child {
      border-right: 1px solid black;
    }
  }
}

<div class="grid headers-row">
  <span>Name</span>
  <span>Age</span>
  <span>Address</span>
  <span>Status</span>
  <span>QRSCode</span>
 </div>
 <div class="grid">
  <span>
   <div>John Doe</div>
   <div>[email protected]</div>
  </span>
  <span>67</span>
  <span>
     <div>Address 1</div>
     <div>Address 2</div>
  </span>
  <span><div>Status</div></span>
  <span><div>1234567</div></span>
</div>

Answer 1

如果您只需要不同的边框颜色，则添加一条规则，当行被

border-color

ed

 时更改嵌套元素的 

:hover

.grid {
  &:not(.headers-row):hover > * {
    border-color: red;
  }
}

带有纯 CSS 的片段：

.grid {
  display: grid;
  grid-template-columns: 15% 10% 25% 25% 25%
}

.grid>* {
  height: 5.125rem;
  text-align: left;
  margin-bottom: 0.5rem
}

.grid>*:first-child {
  border-radius: 0.5rem 0 0 0.5rem;
  text-align: left;
  padding-left: 1rem
}

.grid>*:last-child {
  border-radius: 0 0.5rem 0.5rem 0
}

.grid:not(.headers-row)>* {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  border: 1px solid black;
  border-left: 0;
  border-right: 0
}

.grid:not(.headers-row)>*:first-child {
  justify-content: center
}

.grid:not(.headers-row)>*:first-child {
  border-left: 1px solid black
}

.grid:not(.headers-row)>*:last-child {
  border-right: 1px solid black
}

.grid:not(.headers-row):hover>* {
  border-color: red
}

<div class="grid headers-row">
  <span>Name</span>
  <span>Age</span>
  <span>Address</span>
  <span>Status</span>
  <span>QRSCode</span>
</div>
<div class="grid">
  <span>
   <div>John Doe</div>
   <div>[email protected]</div>
  </span>
  <span>67</span>
  <span>
     <div>Address 1</div>
     <div>Address 2</div>
  </span>
  <span><div>Status</div></span>
  <span><div>1234567</div></span>
</div>

Answer 2

包含

&:not(.headers-row):hover >

* 选择器并在其中定义其边框属性。

.grid {
  display: grid;
  grid-template-columns: 15% 10% 25% 25% 25%;
  > * {
    height: 5.125rem;
    text-align: left;
    &:first-child {
      border-radius: 0.5rem 0 0 0.5rem;
      text-align: left;
      padding-left: 1rem;
    }

    &:last-child {
      border-radius: 0 0.5rem 0.5rem 0;
    }
    margin-bottom: 0.5rem;
  }
  &:not(.headers-row) > * {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    &:first-child {
      justify-content: center;
    }
    border: 1px solid black;
    border-left: 0;
    border-right: 0;
    &:first-child {
      border-left: 1px solid black;
    }
    &:last-child {
      border-right: 1px solid black;
    }
  }
  &:not(.headers-row):hover > * {
    border: 1px solid red;
    border-left: 0;
    border-right: 0;
    &:first-child {
      border-left: 1px solid red;
    }
    &:last-child {
      border-right: 1px solid red;
    }
  }
}

<div class="grid headers-row">
  <span>Name</span>
  <span>Age</span>
  <span>Address</span>
  <span>Status</span>
  <span>QRSCode</span>
 </div>
 <div class="grid">
  <span>
   <div>John Doe</div>
   <div>[email protected]</div>
  </span>
  <span>67</span>
  <span>
     <div>Address 1</div>
     <div>Address 2</div>
  </span>
  <span><div>Status</div></span>
  <span><div>1234567</div></span>
</div>