Отображение видимого или скрытого div зависит от mouseOver и mouseOut - PullRequest
Новая
       37

Отображение видимого или скрытого div зависит от mouseOver и mouseOut

0 голосов
/ 08 мая 2020

У меня есть эти 9 карт, для каждой карты, когда мышь находится над компонентом, я бы скрыл / отобразил. 

``
<div class="cards__food">
    <% @foods.each do |food| %>
      <%= link_to(foods_path) do %>
        <div class="card__food">
          <div class="card__food-img" style="background-image: url(<%= food.image_url %>);"></div>
          <h3><%= food.name.upcase %></h3>
          <div id="hide">
            <p>ORDER</p>
          </div>
        </div>
        <% end %>
      <% end %>
  </div>


#hide {
  visibility: hidden;
}
  • Я выбрал каждую карту. Каждому из них назначены переменные карты.
  • Чтобы повлиять на меня, я сделал то же самое

Вот моя проблема, без forEach я не могу использовать addEventListener.

консоль сказала:

TypeError: cards.addEventListener не является функцией

Итак, я использовал forEach. Но когда указатель мыши находится над картой, запускается только первая карта и отображается или скрывается: 

          <div id="hide">
            <p>ORDER</p>
          </div>

зависит от mouseover / mouseout 

const addOrderToFood = () => {
  const cards = document.querySelectorAll(".card__food");
  const order = document.getElementById('hide');
  if (cards) {
    cards.forEach(card => {
      card.addEventListener("mouseover", (event) => {
        console.log(event)
        order.style.visibility='visible';
      })
      card.addEventListener("mouseout", (event) => {
        console.log(event)
        order.style.visibility='hidden';
      })
    })

  }

}

Я не могу найти проблему и Я действительно хочу превзойти этот кусок кода, ха-ха! : D

1 Ответ

0 голосов
/ 08 мая 2020

Обычный CSS подойдет. hide селектор не должен быть идентификатором, потому что он появляется на странице несколько раз. 

.card__food:hover > .hide {
    visibility: 'visible';
}
.card__food > .hide {
    visibility: 'hidden';
}
...