RoR: link_to tags in a link_to block?

Question

I'm trying to turn a div in to a link but I have link_to tags within my block and this doesn't work. The block stops at the calling of next link_to.

Having looked around for answers I see this is not the right way at all.

<%= link_to tweet_path(tweet.id) do %>
  <div class="tweet-link">
   blah blah
   <% link_to.... %>
   blah blah
   <% link_to.... %>
  </div>
<% end %>

What is the best work around for this problem to get the nested links working as well as my div link? Suggestions? jQuery maybe? ty

Answer 1

It is possible, but not recommmended. Browsers wouldn't know how to read that. It's not a specific rails problem, even if you did it with plain html <a> tags it would lead to unpredictable behaviour.

See here: https://stackoverflow.com/a/9883044/9595653

But also here https://css-tricks.com/nested-links/

Answer 2

I used this CSS solution by Jules Colle in the link you provided.

https://codepen.io/pwkip/pen/oGMZjb

.block {
  width: 200px;
  height: 300px;
  background-color:#dedede;
  position:relative;
  padding: 20px;
}

.block .overlay {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
}
.block .overlay:hover {
  background-color: #efefef;
}

.block .inner {
  position:relative;
  pointer-events: none;
  z-index: 1;
}

.block .inner a {
  pointer-events: all;
  position:relative;
}

a:hover {
  color: green;
}





  <div class="block">
     <a class="overlay" href="#overlay-link" title="overlay"></a>
       <div class="inner">
        <p>This entire box is a hyperlink. (Kind of)</p><br><br><br><br>
          <p><a href="#inner-link" title="inner">I'm a W3C compliant hyperlink inside that box</a></p>
      </div>
    </div>

https://stackoverflow.com/a/46707009/13027683

Not perfect but it works! ty