1

我的主页上以网格的形式加载了一堆图像。其中两个图像是直接从资产文件夹加载的，而其他四个是根据它们是否被选为主页项目来加载的。

以下是它们加载方式的代码：

    <div class="three_column_grid">
        <div class="col span_1_of_3">
            <%= image_tag("1stassetsimage.png") %>
            <%= image_tag("2ndassetsimage.jpg") %>
            <% @product = Product.all %>
            <% @product.each do |product| %>
                <% if product.display_on_home_page and !product.is_highlight_product and !(product == '..') %>
                    <%= link_to image_tag(product.product_image), products_content_url(product.id), :controller=>'products' %>
                <% end %>
            <% end %>
            <% @subcategory = Subcategory.all %>
            <% @subcategory.each do |subcategory| %>
                <% if subcategory.display_on_home_page and !subcategory.is_highlight_product and !(subcategory == '..') %>
                    <%= link_to image_tag(subcategory.image_attachment), subcategories_content_url(subcategory.id), :controller=>'subcategories' %>
                <% end %>
            <% end %>
        </div>
    </div>

至于 CSS 本身，这是我控制进来的各种项目的样式的方式：

           .three_column_grid{
                margin-top: 2%;
                width: 60%;
                position: relative;
                float: right;

                img {
                    display: inline-block;
                    width: 200px;
                    height: 200px;
                    -webkit-box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.3);
                    -moz-box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.3);
                    box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.3);
                    margin-left: 2%;
                    margin-right: 2%;
                    margin-bottom: 4%;

                    &:hover{
                        display: inline-block;
                        border: none !important;
                        -webkit-box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.3);
                        -moz-box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.3);
                        box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.3);
                    }
                }
            }

我尝试了几件事；添加一个额外的 div 标签来格式化资产图像会抛出整个事情，并使用:not选择器我得到相同的结果。我希望删除周围的阴影，1stassetsimage.png但我希望其他格式保持不变，因此它可以正确融入网格。

4

1 回答 1

3

您可以将类添加到排除标签：

<%= image_tag("1stassetsimage.png", class: "plain" ) %>

然后“撤消”该元素的框阴影：

.three_column_grid {
  img.plain, img.plain:hover {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}
于 2013-10-17T13:14:09.677 回答