光滑的轮播单独覆盖
Lui*_*uiz 0 html javascript css jquery
解释
我试图在将它们悬停时在滑块 ( slick.js ) 的每个图像上设置一个叠加层，但是由于某种原因，当我将其悬停时，叠加层出现在滑块的顶部（所有 12 个图像），而不是图像盘旋。
代码
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>提前致谢，
路易斯。
为什么它不起作用？
您的代码无法按预期工作，因为您的叠加层相对于元素而.carousel-wrapper不是定位a（.carousel-wrapper是它的第一个父级，.overlay而position不是static- 如果您没有position明确设置它默认为static）。
以后如何避免这个错误？
如果您希望您网站上的任何元素具有叠加层（或者通常您想在position: absolute某处使用），您需要记住该元素将相对于具有positon: relative或的父元素进行定位position: absolute。如果没有这样的元素，它会将自己定位到<html>.
这里解释得很好：
请记住，这些值将相对于具有相对（或绝对）定位的下一个父元素。如果没有这样的父级，它将默认一直返回到元素本身，这意味着它将相对于页面本身放置。
（绝对定位）
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
检查工作演示：
https://jsfiddle.net/thffcgqc/2/
| 归档时间： |
|
| 查看次数： |
7000 次 |
| 最近记录： |