光滑的旋转木马个人覆盖

时间：2017-04-22 19:38:39

标签： javascript jquery html css

说明

我正在尝试在悬停它们时在滑块（slick.js）的每个图像上设置叠加层，但出于某种原因，当我将其悬停时，叠加层会出现在滑块顶部（所有12张图像） ），而不是图像徘徊。

代码

您还可以在JSFiddle和"fullscreen mode"中看到它。

ps：最好全屏查看叠加内容。

$('.carousel').slick({
    arrows: false,
    dots: true,
    slidesPerRow: 3,
    rows: 3
});
.carousel-wrapper {
    background-color: rgb(235, 235, 235);
    position: relative;
}

img {
    background-color: black;
}

.slick-slide {
    text-align: center !important;
}

.overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(1, 1, 1, .35);
    transition: 0.2s;
    opacity: 0;
}

.overlay:hover {
    opacity: 1;
}

.overlay-content {
    color: rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 50%;
}
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
</head>

<body>

    <section class="carousel-wrapper">
        <div class="container">
            <div class="row">

                <ul class="col-md-12 carousel text-center">
                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                            <div class="overlay">
                                <div class="overlay-content">
                                    <h4>content</h4>
                                </div>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                            <div class="overlay">
                                <div class="overlay-content">
                                    <h4>content</h4>
                                </div>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                            <div class="overlay">
                                <div class="overlay-content">
                                    <h4>content</h4>
                                </div>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                            <div class="overlay">
                                <div class="overlay-content">
                                    <h4>content</h4>
                                </div>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                            <div class="overlay">
                                <div class="overlay-content">
                                    <h4>content</h4>
                                </div>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                            <div class="overlay">
                                <div class="overlay-content">
                                    <h4>content</h4>
                                </div>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                            <div class="overlay">
                                <div class="overlay-content">
                                    <h4>content</h4>
                                </div>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                            <div class="overlay">
                                <div class="overlay-content">
                                    <h4>content</h4>
                                </div>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                            <div class="overlay">
                                <div class="overlay-content">
                                    <h4>content</h4>
                                </div>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                            <div class="overlay">
                                <div class="overlay-content">
                                    <h4>content</h4>
                                </div>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                            <div class="overlay">
                                <div class="overlay-content">
                                    <h4>content</h4>
                                </div>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                            <div class="overlay">
                                <div class="overlay-content">
                                    <h4>content</h4>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>

            </div>
        </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

</body>

</html>

提前致谢，
路易斯。

2 个答案:

答案 0 :(得分：3)

为什么不起作用？

您的代码无法按预期工作，因为您的叠加层相对于a而非.carousel-wrapper元素定位（.overlay是position的第一个父级static以外的position - 如果您未明确设置static，则默认为position: absolute。

将来如何避免这个错误？

如果您希望网站上的任何元素都有叠加层（或者通常您希望在某处使用positon: relative），则需要记住此元素将相对于其父元素定位它有position: absolute或<html>。如果没有这样的元素，它会将自己定位到{{1}}。

这里解释得非常好：

  

请记住，这些值将相对于下一个父元素   相对（或绝对）定位。如果没有这样的父母，   它将默认一直返回到元素本身   意味着它将相对于页面本身放置。

（关于绝对定位）

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

检查工作演示：

https://jsfiddle.net/thffcgqc/2/

demo

答案 1 :(得分：1)

将锚标记和叠加内容包装在单独的div和样式中，如下所示。原因是您没有使用边距权限来获取框之间的空格。您只是使用带有li标记的固定标记，图像会在父容器中留下间隙。如果放置了叠加层，您将看到白色间隙和图像上的叠加层（这有点不是您想要的 - 我相信）

请参阅下面的代码段

＆＃13;
＆＃13; 
$('.carousel').slick({
  arrows: false,
  dots: true,
  slidesPerRow: 3,
  rows: 3
});
＆＃13; 
.carousel-wrapper {
  background-color: rgb(235, 235, 235);
  position: relative;
}

img {
  background-color: black;
}

.slick-slide {
  text-align: center !important;
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(1, 1, 1, .35);
  transition: 0.2s;
  opacity: 0;
  background: red;
  z-index: 1;
}

.overlay:hover {
  opacity: 1;
}

.overlay-content {
  color: rgb(255, 255, 255);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

a {
  position: relative;
  display: inline-block;
}

a:hover .overlay {
  opacity: 1
}

.img_cont {
  position: relative;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
</head>

<body>

  <section class="carousel-wrapper">
    <div class="container">
      <div class="row">

        <ul class="col-md-12 carousel text-center">
          <li>
            <a href="#">
              <div class="img_cont">
                <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">

                <div class="overlay">
                  <div class="overlay-content">
                    <h4>content</h4>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="img_cont">
                <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">

                <div class="overlay">
                  <div class="overlay-content">
                    <h4>content</h4>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="img_cont">
                <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">

                <div class="overlay">
                  <div class="overlay-content">
                    <h4>content</h4>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="img_cont">
                <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">

                <div class="overlay">
                  <div class="overlay-content">
                    <h4>content</h4>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="img_cont">
                <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">

                <div class="overlay">
                  <div class="overlay-content">
                    <h4>content</h4>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="img_cont">
                <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">

                <div class="overlay">
                  <div class="overlay-content">
                    <h4>content</h4>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="img_cont">
                <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">

                <div class="overlay">
                  <div class="overlay-content">
                    <h4>content</h4>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="img_cont">
                <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">

                <div class="overlay">
                  <div class="overlay-content">
                    <h4>content</h4>
                  </div>
                </div>
              </div>
            </a>
          </li>

          <li>
            <a href="#">
              <div class="img_cont">
                <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">

                <div class="overlay">
                  <div class="overlay-content">
                    <h4>content</h4>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="img_cont">
                <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">

                <div class="overlay">
                  <div class="overlay-content">
                    <h4>content</h4>
                  </div>
                </div>
              </div>
            </a>
          </li>

        </ul>

      </div>
    </div>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题