rails 方式鼠标悬停或悬停，然后 mouseout 回到 post.image

Question

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

*在鼠标悬停时-背景变成绿色，带有字体真棒图标

*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

根据您进一步的 cmets，我猜您希望在图像顶部叠加，而不是在悬停时替换图像。

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

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

导轨/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;
}