Question 358719 in Html Question posted in
Some basic documentation can be found here.

Html – CSS display grid hover border colour change

I’m looking to create a simple table with the look below. I’m having difficulty changing the border of the row to red when it is being hovered over … as long as the row is not the header row. So if it has a class of "grid headers-row" then nothing occurs when you hover over it. However for a data row, ie class is "grid" the entire row border (seen in black) will change it’s border color to red.

enter image description here

I’m trying within this css/html context

.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>
Tags:

2

Answers


  1. 0

    If all you need is just a different border color then add a rule that changes a border-color of nested elements when the row is :hovered

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

    Snippet with plain 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>
    Login or Signup to reply.
  2. 0

    Include the &:not(.headers-row):hover > * selector and define its border properties within.

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search