我有一个包含许多照片的索引 View 。 我想对每张照片制作悬停效果,但我的代码仅将效果放在第一张照片上,因为它没有 id。
我不知道如何处理。请问有什么帮助吗?
<script>
$(".product-image").on("mouseover", function(){
$("#product-overlay").show();
});
$(".product-image").on("mouseleave", function(){
$("#product-overlay").hide();
});
</script>
这将每次在同一个项目上添加效果(显示叠加),并且我需要每个项目都有独特的效果。
<li id="product_<%= product.id %>">
<div class="product-image">
<%= link_to small_image(product, :itemprop => "image"), url, :itemprop => 'url' %>
<div id="product-overlay">More</div>
</div>
<% end %>
</ul>
最佳答案
问题很简单,您在 $("#product-overlay").show()
中引用了一个 id 并隐藏。
试试这个:
$('.product-image').on('mouseover', function() {
$(this).find('.product-overlay').show();
});
然后将您的 View 更改为:
<li id="product_<%= product.id %>">
<div class="product-image">
<%= link_to small_image(product, :itemprop => "image"), url, :itemprop => 'url' %>
<div class="product-overlay">More</div>
</div>
</li>
关于javascript - 动态 javascript 悬停在 Rails 上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28182135/