Question

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

mouseover -background上的

*变为绿色，带有字体真棒图标

* 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秒内更改不透明度和背景颜色使其看起来像平滑过渡。

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

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

rails鼠标悬停或悬停，然后mouseout返回post.image

1 个答案: