css - CSS box-shadow VS オーバーフローが非表示

Question

カルーセルを作成しました。カルーセルアイテムに box-shadow プロパティを追加したいと思います。カルーセルのoverflow:hiddenプロパティのため、これは不可能です。

それを克服する方法はありますか？

*なんらかの理由でカルーセルが正しく機能していませんが、CSSの問題は確認できます

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div id="myCarousel" class="carousel slide" data-interval="false">
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>

                                    <h4><a href="#">Product Name</a></h4>

                                <div class="price">€ 25.00</div>
                            </div>
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>

                                    <h4><a href="#">Product Name</a></h4>

                                <div class="price">€ 25.00</div>
                            </div>
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>

                                    <h4><a href="#">Product Name</a></h4>

                                <div class="price">€ 25.00</div>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                    <div class="item">
                        <div class="row">
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>

                                    <h4><a href="#">Product Name</a></h4>

                                <div class="price">€ 63.00</div>
                            </div>
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>

                                    <h4><a href="#">Product Name</a></h4>

                                <div class="price">€ 24.00</div>
                            </div>
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>
Product Name</a>
                                </h4>
                                <div class="price">€ 25.00</div>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                    <div class="item">
                        <div class="row">
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>

                                    <h4><a href="#">Product Name</a></h4>

                                <div class="price">€ 42.00</div>
                            </div>
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>
Product Name</a>
                                </h4>
                                <div class="price">€ 25.00</div>
                            </div>
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>

                                    <h4><a href="#">Product Name</a></h4>

                                <div class="price">€ 54.00</div>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                </div>
                <!--/carousel-inner-->
                <div class="carousel-nav"> <a class="carousel-control prev" href="#myCarousel" data-slide="prev"></a>
 <a class="carousel-control next" href="#myCarousel" data-slide="next"></a>

                </div>
            </div>
            <!--/myCarousel-->
        </div>
    </div>
</div>

css (完全な css コードはここに掲載していません。読めないためです。この問題に関する最も重要なスタイルは次のとおりです):

.product-item {
    position: relative;
    padding-top: 20px;
}
.product-item:hover {
    -webkit-box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
    box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
    z-index: 100;
}

ジャバスクリプト

jQuery('.carousel').each(function () {
    jQuery(this).carousel({
        interval: false
    });
});

score 1 · Accepted Answer

(注: 最初の 2 つの提案は一番下にあります。JS が機能すると、最初の試みは機能しませんでした。2 番目の試みは機能しますが、コメントによる OP の設計制限には適合しません。)

パディングとパディングが同じ.product-item場合、それぞれの周りにボックスの影を表示することはできません。ただし、パディングをパディングよりも大きくする場合は、ネガティブを使用して、カルーセルの幅を親要素の外側に拡張できます。これにより、パディングを追加してシャドウが表示されるようにしながら、onを維持して、カルーセルが機能できるようにします。.product-item.container.container.product-itemmargin-leftmargin-right.itemoverflow: hidden.carousel-inner

最も簡単な方法は、のスタイリングを変更することです.container-inner。ただし、カルーセルの JS の動作方法が原因で、カルーセルスライド間のトランジションが壊れます。

壊れたフィドル: https://jsfiddle.net/80be2qoj/

.carousel-outer回避策として、 divを追加して次の#myCarouselようにすることができます。

https://jsfiddle.net/abfmatq6/

.container {
    padding-right: 25px;
    padding-left: 25px;
}
.carousel-outer {
    margin-top: 20px;
    padding: 18px 0;
    border-top: 1px solid #b8bec2;
    border-bottom: 1px solid #b8bec2;
}
.carousel.carousel {
    margin-top: 0;
    margin-left: -25px;
    margin-right: -25px;
    padding: 0;
    border: 0;
}
.carousel-nav.carousel-nav {
    bottom: -50px;
    left: 15px;
}
.item {
  padding: 25px;
}

元の提案

.carousel-inner にパディングを追加できます。

.carousel-inner {
    padding: 25px;
}
.product-item {
    position: relative;
    padding-top: 20px;
}
.product-item:hover {
    -webkit-box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
    box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
    z-index: 100;
}

フィドル: https://jsfiddle.net/cL4L8sd2/

編集1：

最初に: フィドルで jQuery を有効にしていないため、カルーセルが機能していませんでした。

.carousel-inner ではなく、.item にパディングを追加する必要があります。これは期待どおりに機能します。

.item {
  padding: 25px;
}

ワーキングフィドル：

https://jsfiddle.net/tcLk3tnx/

score 1 · Accepted Answer

.product-item 内に別の div を追加し、含まれている .product-item のパディングのために表示される必要があるものに影を適用できます。

css - CSS box-shadow VS オーバーフローが非表示

2 に答える 2

Related

Reference