1

ホームページのグリッドにたくさんの画像がロードされています。これらの画像のうち 2 つはアセット フォルダーから直接読み込まれますが、他の 4 つはメイン ページ アイテムとして選択されているかどうかに基づいて読み込まれます。

それらがロードされる方法のコードは次のとおりです。

    <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 に答える