Wsrtjtyk

I'm trying to create a menu which I'm laying out using CSS grid. The problem that I'm having is figuring out how I can make the menu interactive when the mouse is hovering over each menu item.

I would like to be able to highlight the entire row when the mouse is over any of the menu items in the row. I can highlight each individual grid cell by adding a :hover css rule, but I don't know how to highlight the entire grid row.

The second part is then detecting when a row is being clicked. Again, I can add an onClick event handler to each cell but that doesn't seem ideal, as users could accidentally click in the gap between grid cells. I was thinking that if I can figure out how to highlight the entire row, then i could add the click handler to this row highlighter and that would solve the gap click problem.

I have created a codepen example that demonstrates how the menu is currently constructed: https://codepen.io/marekKnows_com/pen/RqMgGw

HTML:

<div class="myGrid">

  <div class="anchor" id="item1">

    <i class="image material-icons">folder_open</i>

  </div>

  <span class="text">Open...</span>

  <span class="shortcut">Ctrl+O</span>



  <div class="anchor" id="item2">

    <i class="image material-icons">save</i>

  </div>

  <span class="text">Save...</span>

  <span class="shortcut">Ctrl+S</span>



  <div class="anchor" id="item3"></div>

  <span class="text">Action</span>



  <div class="separator"></div>



  <div class="anchor" id="item4"></div>

  <span class="text">Exit</span>

  <span class="shortcut">Ctrl+X</span>

</div>

CSS:

.myGrid {

  border: 1px solid black;

  display: grid;

  grid-template-columns: 20px auto auto;

  grid-gap: 2px 6px;

  align-items: center;

  justify-items: start;

  padding: 10px;

  box-sizing: border-box;

}

.image { 

  width: 24px;

}

.text {

  height: 28px;

  line-height: 28px

}

.shortcut {

  justify-self: end;

  padding: 0 5px;

  height: 28px;

  line-height: 28px

}

.separator {

  grid-column: 1 / span 3;

  width: 100%;

  height: 3px;

  border-bottom: 1px solid lightgray;

}

I finally got it to work. What I ended up doing was making the anchor element have position relative. Then I added a new div with position absolute under the anchor element. From within JavaScript I can size the new element to be the full width of the grid and using z-index I can position it relative to the other elements in the row accordingly.

Firstly, you might want to change your html so the .anchor elements are wrapping each item.

<div class="myGrid">

    <div class="anchor" id="item1">

        <i class="image material-icons">folder_open</i>

        <span class="text">Open...</span>

        <span class="shortcut">Ctrl+O</span>

    </div>

    <div class="anchor" id="item2">

        <i class="image material-icons">save</i>

        <span class="text">Save...</span>

        <span class="shortcut">Ctrl+S</span>

    </div>

    <div class="anchor" id="item3">

        <span class="text">Action</span>

    </div>

    <div class="separator"></div>

    <div class="anchor" id="item4">

        <span class="text">Exit</span>

        <span class="shortcut">Ctrl+X</span>

    </div>

</div>

And then use flex to align the contents of each item

.myGrid {

  border: 1px solid black;

  padding: 10px;

  box-sizing: border-box;

}



.anchor {

  display: flex;

  justify-content: flex-start;

}



/* Hover for each anchor */

.anchor:hover {

    background: red;

}



.image { 

    width: 24px;

}



.text {

    height: 28px;

    line-height: 28px

}



.shortcut {

    margin-left: auto; /* push the shortcut to the right */

    padding: 0 5px;

    height: 28px;

    line-height: 28px

}



.separator {

    grid-column: 1 / span 3;

    width: 100%;

    height: 3px;

    border-bottom: 1px solid lightgray;

}

https://codepen.io/anon/pen/xQWLaE

       .anchor:hover > 

       .mygrid

       { background:red } 

check this if it works on hovering item1 it will change the border color(from black to red as highlighting)