在我的Rails应用程序中,用户可以搜索并且此搜索检索可以说5个结果。
每个结果都是一个大的矩形块,在这个块中有很多Div和东西。 当鼠标在此块上移动时,整个块将突出显示。我希望这个突出显示的块可以单击链接。
如果我使用此代码覆盖所有Div:
<%= link_to root_path do %>
<div>Hey!</div>
<% end %>
只有一些单词可以点击并指向链接。不是我想要的整个突出显示的矩形块。
CSS文件:
/* Lists */
.lists {
background:#fff;
color:#138cd6;
font-size: 17px;
font-weight: normal;
display: block;
font-family: 'Metrophobic', sans-serif;
width: 940px;
margin-bottom: 15px;
margin-right: auto;
margin-left: auto;
border: 1px solid #69769a;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-border-radius: 4px;
}
.limeposts {
list-style: none;
margin: 0px;
padding: 0px;
}
.limeskin:hover {
background: #eee;
cursor: pointer;
display: block;
}
.limebox {
padding: 15px;
overflow: hidden;
}
.limeface {
width: 200px;
float: left;
margin-left: 20px;
text-align: left;
}
.limecontent {
width: 400px;
float: left;
margin-left: 0px;
text-align: left;
}
.limecost {
width: 200px;
float: right;
margin-right: 20px;
text-align: left;
border: 1px solid #7a8494;
padding: 5px;
width: 150px;
height: 60px;
}
观点:
<% @posts.each do |post| %>
<div class="lists">
<ol class="limeposts">
<li>
<div class="limeskin">
<div class="limebox">
<div class="limecost">
<b>Price:</b>
<%= number_to_currency(post.price, :unit => "R") %><br>
<b>Seats available:</b>
<%= post.seat %>
<b>Bagroom:</b>
<%= post.bagroom %>
</div>
<div class="limeface">
<b><%=post.user.name%></b>
</div>
<div class="limecontent">
<b>From:</b>
<%= post.from %> <br>
<b>To:</b>
<%= post.to %><br>
<b> Date:</b>
<%= post.date %>
</div>
</div>
</div>
</li>
</ol>
</div>
<% end %>
我已经尝试过并试过一切。得到相同的结果!