2016-12-27 58 views
0

我有一個div結構類似這樣:軌LINK_TO上覆蓋DIV

  <% @posts.each do |post| %> 
      <!-- Shot --> 
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
       <div class="shot shot-minimal"> 
       <div class="shot-preview"> 
        <a class="img" href="shot-gallery.html"><img src="http://rwdtow.stdout.in/img/avatar-icon.png" alt=""></a> 

        <a class="text-overlay"> 
         <span class="heading"><%= post.tite %></span> 
         <span class="desc"><%= post.shortdescription %></span> 
        <time datetime="2016-02-04 22:30">7 hours ago</time> 
        </a> 
       </div> 

       <div class="shot-detail"> 
        <div class="shot-info"> 
        <p><%= post.title %></p> 
        </div> 

        <ul class="shot-stats"> 
        <li><i class="fa fa-eye"></i><span>6.3k</span></li> 
        <li><a class="like" href="#"><i class="fa fa-heart"></i><span>1.2k</span></a></li> 
        </ul> 
       </div> 
       </div> 
      </div> 
      <!-- END Shot --> 
      <% end %> 

在上面的DIV我有一個覆蓋:

   <a class="text-overlay"> 
        <span class="heading"><%= post.tite %></span> 
        <span class="desc"><%= post.shortdescription %></span> 
       <time datetime="2016-02-04 22:30">7 hours ago</time> 
       </a> 

所以我放在一個的link_to與疊加,所以文字重疊,文本是可點擊:

   <%= link_to post, class:"text-overlay" do %>   
        <span class="heading"><%= post.tite %></span> 
        <span class="desc"><%= post.shortdescription %></span> 
       <time datetime="2016-02-04 22:30">7 hours ago</time> 
       <% end %> 

的覆蓋工作正確的,但是當我點擊它,它不帶我去SH對該職位採取行動。如何我的最終代碼看起來如下:

 <% @posts.each do |post| %> 
     <!-- Shot --> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
      <div class="shot shot-minimal"> 
      <div class="shot-preview"> 
       <a class="img" href="shot-gallery.html"><img src="http://rwdtow.stdout.in/img/avatar-icon.png" alt=""></a> 

       <%= link_to post, class:"text-overlay" do %>   
       <span class="heading"><%= post.tite %></span> 
       <span class="desc"><%= post.shortdescription %></span> 
       <time datetime="2016-02-04 22:30">7 hours ago</time> 
       <% end %> 
      </div> 

      <div class="shot-detail"> 
       <div class="shot-info"> 
       <p><%= post.title %></p> 
       </div> 

       <ul class="shot-stats"> 
       <li><i class="fa fa-eye"></i><span>6.3k</span></li> 
       <li><a class="like" href="#"><i class="fa fa-heart"></i><span>1.2k</span></a></li> 
       </ul> 
      </div> 
      </div> 
     </div> 
     <!-- END Shot --> 
     <% end %> 

回答

0

對不起,我不能評論,因爲我的聲譽。你能再給我兩件事嗎?

  1. 在瀏覽器中呈現HTML代碼。您可以通過在瀏覽器中執行「檢查元素」來獲取它。
  2. $(".text-overlay")關聯的JavaScript/JQuery/CoffeeScript。刪除event.preventDefault()。我已經使用JQuery語法。如果您正在使用其他庫,請查找相同的語法並刪除。