I have a div structured like so:
<% @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 %>
Наложение работает правильно, но когда я нажимаю на него, он не принимает меня к действию показать для поста. Вот как выглядит мой окончательный код:
<% @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 %>
Извините, я не могу комментировать из-за моей репутации. Можете ли вы предоставить мне еще две вещи?
$(".text-overlay")
, связанный С. Удалитьevent.preventDefault()
. Я использовал синтаксис JQuery. Если вы используете какую-то другую библиотеку, найдите синтаксис для того же самого и удалите.