Change grid-column (sidebar) on hover

user_13294788 0
Viewed 109

I am trying to change the width of the sidebar that sets inside a parent grid layout when it's hovered on Such that the sidebar width now is 64px but when hover on becomes 120px 

.container{
  display:grid;
  height: 100vh;
  width: 100vw;
  grid-template-areas: "sidebar content";
  grid-template-columns: 64px auto;
}
.sidebar{
  grid-area:sidebar;
  background-color: black;
}
.content{
  grid-area:content;
  background-color:red;
}
/* this part */
.sidebar:hover{
  grid-column:120px;
}
<div class="container">
<div class= "sidebar">

</div>
<div class="content">

</div>
</div>

css html
1 Answers

For me it seem logic to use flexbox in this case, as you cannot target the parent when the child (the sidebar) is hovered.

body {
 margin:0;
}
.container {
  height: 100vh;
  width: 100vw;
  display: flex;
}
.sidebar {
  background-color: black;
  width: 64px;
  transition: 0.3s ease;
}
.content {
  background-color: red;
  flex-grow: 1;
}
/* this part */
.sidebar:hover {
  width: 120px;
}
<div class="container">
  <div class="sidebar">
  </div>
  <div class="content">
  </div>
</div>

user_152886410
Related