我有这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 is not a function:
TypeError: cards.addEventListener不是一个函数。
所以我使用了forEach。但是当鼠标移到一张卡片上时,只有第一张卡片会被触发并显示为可见或隐藏。
<div id="hide">
<p>ORDER</p>
</div>
取决于mouseovermouseout
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
普通的CSS就可以了。hide
选择器不应该是一个id,因为它在页面上多次出现。
.card__food:hover > .hide {
visibility: 'visible';
}
.card__food > .hide {
visibility: 'hidden';
}