javascript - 滑轨方式鼠标悬停或悬停，然后鼠标移回 post.image

Question

我无法弄清楚 rails 循环遍历我的@posts 的方式是什么，我的 link_to 曾经有一个鼠标悬停或悬停在绿色背景颜色和字体很棒的图标上，然后在 mouseout 上运行它回到我的post.image

*在鼠标悬停时背景变成绿色， Font Awesome 图标

*on mouseout - 恢复正常并显示 post.image

<!-- Portfolio Grid Section -->
        <section id="portfolio">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h2>Portfolio</h2>
                        <hr class="star-primary">
                    </div>
                </div>
                <div class="row col-md-8 col-md-offset-2">
                    <% @posts.each do |post| %> 
                        <div class="col-sm-4 portfolio-item">
                            <%= link_to image_tag( post.image, class: "img-circle", size: "200x200"), post_path(post)  %>
                        </div>
                    <% end %>
                </div>
            </div>
        </section>

Answer 1

根据您的进一步评论，我猜您想要在图像顶部叠加层，而不是在悬停时替换图像。

为此，在图像下方和链接内创建一个绝对定位的 span/div。将跨度不透明度设置为 0，然后在悬停链接时将其设置为 1。诀窍是使用 CSS 过渡属性，通过在 0.5 秒的时间内更改不透明度和背景颜色，使其看起来像平滑过渡。

我还没有测试下面的代码让你走上正轨。

rails/HTML:

<div class="col-sm-4">
  <%= link_to post_path(post), class: "post-item" do %>
    <%= image_tag( post.image, class: "img-fluid") %>
    <span class="overlay"><i class="fa fa-check"></i></span>
  <% end %>
</div>

CSS

.post-item{
  display:block;
  position:relative;
}
.post-item span{
  overlay: 0;
  position:absolute;
  display:block;
  transition: all 0.5s ease;
  background-color: transparent;
}
.post-item:hover span{
  opacity: 1;
  background-color: green;
}