根据 mouseOver 和 mouseOut 使 div 可见或隐藏

Question

我有这 9 张卡片，对于每张卡片，当鼠标悬停在组件上时我会 hide/visible .

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

Answer 1

普通 CSS 即可。 hide 选择器不应该是 id，因为它在页面上出现了多次。

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

根据 mouseOver 和 mouseOut 使 div 可见或隐藏

Render a div visible or hidden depend on mouseOver and mouseOut

html

javascript

css

ruby

ruby-on-rails-4