2016-12-27 72 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语法。如果您正在使用其他库,请查找相同的语法并删除。