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

Question

我无法弄清楚什么是通过我的@posts循环的轨道方式，并让我的link_to用于有一个绿色背景的鼠标悬停或悬停 - 颜色与字体真棒图标，然后鼠标移开时有它回到我post.image

*鼠标悬停-background变绿与字体真棒图标

*鼠标移开时 - 回复正常，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

根据您的进一步意见，我g无论你想要在图像上覆盖图层而不是替换悬停图像。

要做到这一点，创建一个绝对定位span/div在图像下和链接。将跨度不透明度设置为0，然后将链接悬停设置为1.诀窍是使用CSS transition属性，通过在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; 
}