javascript - 根据 mouseOver 和 mouseOut 渲染 div 可见或隐藏
问题描述
我有这 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。
控制台说:
类型错误: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
解决方案
纯 CSS 就可以了。hide
选择器不应该是 id,因为它在页面上出现多次。
.card__food:hover > .hide {
visibility: 'visible';
}
.card__food > .hide {
visibility: 'hidden';
}
推荐阅读
- java - Android 从 webhost 获取 json 添加标记 ERROR E/zygote64
- javascript - 无法通过 JQUERY 在动态添加的表行中添加 datetimepicker
- javascript - 使用 vanilla JS 的事件委托
- c++ - C ++ ofstream不会打开文件
- python - 在 Keras 中加载保存的模型(双向 LSTM)
- java - 为什么超类字段的泛型类型不会被擦除到子类型中的具体绑定?
- javascript - 提交后保持表单值
- php - PHP可以关闭与客户端的连接吗?
- javascript - 在javascript中结合对象的两个属性
- c# - ASP.NET Web 表单不允许多个并发请求