0

我创建了一个轮播，我想在轮播项目上添加 box-shadow 属性。这是不可能的，因为轮播的溢出：隐藏属性。

有没有办法克服它？

请检查这个小提琴

*由于某种原因，Carousel 无法正常工作，但您仍然可以看到 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;
}

JAVASCRIPT

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

2 回答 2

1

您可以在 .product-item 中添加另一个 div 并将阴影应用到由于包含 .product-item 的填充而应该可见的部分。

于 2015-03-09T10:03:09.843 回答
1

（注意：前两个建议在底部。一旦 JS 运行，第一次尝试就不起作用。第二次有效，但根据他们的评论不符合 OP 的设计限制。）

.product-item如果.product-itempadding 和.containerpadding 相同，您将无法在每个周围有可见的 box-shadow 。但是，如果使内.container边距大于内.product-item边距，则可以使用负数margin-left并将margin-right轮播的宽度扩大到其父元素之外。这允许您添加填充以.item使阴影可见，同时保持overflow: hiddenon .carousel-inner，这允许轮播做它的事情。

最简单的方法似乎是改变.container-inner. 但是，由于轮播 JS 的工作方式，轮播幻灯片之间的过渡中断。

破小提琴：https ://jsfiddle.net/80be2qoj/

作为一种解决方法，您可以添加一个.carousel-outerdiv#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。

您应该将填充添加到 .item，而不是 .carousel-inner。这按预期工作：

.item {
  padding: 25px;
}

工作小提琴：

https://jsfiddle.net/tcLk3tnx/

于 2015-03-09T10:04:33.040 回答