RoR:link_to 个标签在 link_to 块中?
RoR: link_to tags in a link_to block?
我正在尝试将 div 转换为 link,但我的块中有 link_to 标签,这不起作用。该块在调用下一个 link_to.
时停止
在四处寻找答案后,我发现这根本不是正确的方法。
<%= link_to tweet_path(tweet.id) do %>
<div class="tweet-link">
blah blah
<% link_to.... %>
blah blah
<% link_to.... %>
</div>
<% end %>
要使嵌套的 link 和我的 div link 一样工作,解决此问题的最佳方法是什么?建议? jQuery 也许吧?泰
可以,但不推荐。浏览器不知道如何阅读它。这不是一个特定的 rails 问题,即使你用普通的 html <a>
标签来做它也会导致不可预测的行为。
看这里:
我在您提供的 link 中使用了 Jules Colle 的 CSS 解决方案。
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>
不完美,但很管用!泰
我正在尝试将 div 转换为 link,但我的块中有 link_to 标签,这不起作用。该块在调用下一个 link_to.
时停止在四处寻找答案后,我发现这根本不是正确的方法。
<%= link_to tweet_path(tweet.id) do %>
<div class="tweet-link">
blah blah
<% link_to.... %>
blah blah
<% link_to.... %>
</div>
<% end %>
要使嵌套的 link 和我的 div link 一样工作,解决此问题的最佳方法是什么?建议? jQuery 也许吧?泰
可以,但不推荐。浏览器不知道如何阅读它。这不是一个特定的 rails 问题,即使你用普通的 html <a>
标签来做它也会导致不可预测的行为。
看这里:
我在您提供的 link 中使用了 Jules Colle 的 CSS 解决方案。
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>
不完美,但很管用!泰