滑軌方式鼠標懸停或懸停，然後鼠標移回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; 
}