Как выделить и обнаружить щелчки мыши на строке сетки CSS? - PullRequest
Новая
       10

Как выделить и обнаружить щелчки мыши на строке сетки CSS?

0 голосов
/ 22 ноября 2018

Я пытаюсь создать меню, которое выкладываю, используя сетку CSS.Проблема, которую я имею, состоит в том, чтобы выяснить, как я могу сделать меню интерактивным, когда мышь наводит курсор на каждый элемент меню.

Я бы хотел выделить всю строку, когда указатель мыши находится над любым из пунктов меню в строке.Я могу выделить каждую отдельную ячейку сетки, добавив правило: hover css, но я не знаю, как выделить всю строку сетки.

Вторая часть затем определяет, когда щелкают строки.Опять же, я могу добавить обработчик события onClick для каждой ячейки, но это не кажется идеальным, поскольку пользователи могут случайно щелкнуть в промежутке между ячейками сетки.Я думал, что если я смогу выяснить, как выделить всю строку, то я мог бы добавить обработчик кликов к этой подсветке строк, и это решило бы проблему щелчка щелчка.

Я создал пример codepen, который демонстрируеткак в настоящее время создается меню: 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;
}

Ответы [ 3 ]

0 голосов
/ 22 ноября 2018

Во-первых, вы можете изменить html, чтобы элементы .anchor обернули каждый элемент. 

<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>

А затем с помощью flex выровняйте содержимое каждого элемента 

.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

0 голосов
/ 23 ноября 2018

Я наконец получил его на работу.Я закончил тем, что привязанный элемент имел относительное положение.Затем я добавил новый элемент div с позицией absolute под элементом привязки.Из JavaScript я могу изменить размер нового элемента на всю ширину сетки, а используя z-index, я могу расположить его соответственно относительно других элементов в строке.

0 голосов
/ 22 ноября 2018 
       .anchor:hover > 
       .mygrid
       { background:red }

установите этот флажок, если он работает при наведении на элемент 1, он изменит цвет границы (с черного на красный для выделения)

...