[英]Render a div visible or hidden depend on mouseOver and mouseOut
I have these 9 cards, for each cards when the mouse is over the component I would hide/visible.我有这 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;
}
Here is my trouble, without forEach i can't use addEventListener.这是我的麻烦,没有 forEach 我不能使用 addEventListener。
the console said:控制台说:
TypeError: cards.addEventListener is not a function类型错误:cards.addEventListener 不是 function
So i used forEach.所以我使用了forEach。 But when the mouse is over a card only the first card trigger and render visible or hide:
但是当鼠标悬停在一张卡片上时,只有第一张卡片触发并呈现可见或隐藏:
<div id="hide">
<p>ORDER</p>
</div>
depend on mouseover/mouseout取决于 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';
})
})
}
}
I can't find a issue and I really want to beat this piece of code haha: :D我找不到问题,我真的很想打败这段代码哈哈::D
Plain CSS will do.普通的 CSS 就可以了。
hide
selector should not be an id, because it is appearing multiple times on the page. hide
选择器不应该是 id,因为它在页面上出现多次。
.card__food:hover > .hide {
visibility: 'visible';
}
.card__food > .hide {
visibility: 'hidden';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.