javascript - 光滑的轮播个人覆盖-6ren

javascript - 光滑的轮播个人覆盖

转载作者：太空宇宙更新时间：2023-11-03 21:14:37

解释

我试图在将鼠标悬停在 slider ( slick.js ) 的每个图像上时设置一个叠加层，但由于某种原因，当我将其悬停时，叠加层出现在 slider 的顶部(所有 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>

提前致谢，
路易斯。

最佳答案

为什么不起作用？

您的代码没有按预期工作，因为您的叠加层相对于 .carousel-wrapper 定位不是 a元素(.carousel-wrapper 是 .overlay 的第一个父元素，它有 position 而不是 static - 如果你没有明确设置你的 position 它默认为 static )。

以后如何避免这个错误？

如果你想让你网站上的任何元素有一个覆盖层(或者通常你想在某个地方使用 position: absolute)，你需要记住这个元素将相对于它有 positon: relative 的父元素定位。或 position: absolute .如果没有这样的元素，它会将自己定位到 <html> .

这里解释的很好:

Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself.

(关于绝对定位)

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

检查工作演示:

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

关于javascript - 光滑的轮播个人覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43563785/

文章推荐： python - 如何获取树状图中节点下的所有叶子的列表？

文章推荐： C#结合绝对路径和相对路径，Path.GetFullPath()不一致

文章推荐： python - 具有多个输入序列和相应的多个输出序列的 LSTM

文章推荐： c# - ASP.NET Identity 使用 ConfigureAwait(false)，为什么安全？

C++ 覆盖...覆盖？
我知道 C++ 中的 overriding 是什么。但是，是否存在覆盖？如果有，是什么意思？谢谢。最佳答案在 C++ 术语中，您有覆盖(与类层次结构中的虚拟方法相关)和重载(与具有相同名称但
覆盖/覆盖/堆叠元素上的 Javascript 鼠标事件
我想捕获位于另一个元素下的元素的鼠标事件。这是我所拥有的示例:http://jsfiddle.net/KVLkp/13/ 现在我想要的是当鼠标悬停在红色方 block 上时蓝色方 block 有黄色
python - Pandas boxplot 覆盖/覆盖 matplotlib 图
以下报道 here我尝试创建一个带有重叠散点图的箱线图。但是当我运行时: In [27]: table1.t_in[table1.duration==6] Out[27]: counter 7
javascript - 在 JavaScript 事件中替换/覆盖/覆盖 e.target
有一个 JS Fiddle here , 你能在不克隆到新对象的情况下替换 e.target 吗？下面重复了那个 fiddle 的听众； one.addEventListener('click',
JavaDoc 覆盖
首先要解决重复的可能性: 我不是询问 Override 是什么、它的含义或 @Override 在 java 文档注释之外。那是我不是问 /**Some JavaDoc Comment*/ @over
Java特殊数组补顶/覆盖
我想要高于定义的数组。它存储点及其坐标。 public static List simpleGraph(List nodes) { int numEdges = nodes.size() *
CSS 覆盖
我在 http://olisan.dk/blog/ 有一个博客- 如您所见，有一个 28 像素的高间隙(边距顶部)...在 style.css 中: margin-top: 0; 也被设置为 marg
c++ - 覆盖 VK_USE_64_BIT_PTR_DEFINES
Vulkan 句柄是指向 struct 的不透明指针，或者只是无符号的 64 位整数，具体取决于 VK_USE_64_BIT_PTR_DEFINES 的值: #if (VK_USE_64_BI
wpf - 覆盖 DataGridTextColumn
我正在尝试提供一个行为类似于 DataGridTextColumn 的 DataGrid 列，但在编辑模式下有一个附加按钮。我查看了 DataGridTemplateColumn，但似乎更容易将 Da
Django 覆盖 ASCIIUsernameValidator
使用 Django 1.10 我想在用户名中允许\字符，因为我在使用“django.contrib.auth.middleware.RemoteUserMiddleware”的 Windows 环境中
找不到用于在视频中添加水印的 FFMPEG 覆盖
我正在尝试使用 ffmpeg 将 Logo 放入 rtmp 流中。我的 ffmpeg 版本是 ffmpeg version 4.3.1目前在我的复杂过滤器中，我有: ffmpeg -re -i 'v
Firebase 3存储不允许文件更新/覆盖
是否有用于Firebase 3存储的方法/规则来禁用文件更新或覆盖？我为数据库找到了data.exists()，但没有为存储找到解决方案。最佳答案 TL; DR:在Storage Security
Docker Compose 覆盖
我有两个 Docker Compose 文件，docker-compose.yml看起来像这样 version: '2' services: mongo: image: mongo:3.2
java - 覆盖@CollectionTable
我需要覆盖 JPA 中的集合表吗？也许有人有想法 public class nationality{ @Embedded @AttributeOverrides({
WIX 安装文件，覆盖
嗨，我正在使用 WIX 和下面的代码将文件安装到目录中。我的应用程序的工作方式是用户可以在该目录中复制他们自己的文件，覆盖他们喜欢的内容
Lua 覆盖 # 字符串
我正在尝试为 Lua 中的字符串实现我自己的长度方法。我已成功覆盖字符串的 len() 方法，但我不知道如何为 # 运算符执行此操作。 orig_len = string.len function
scala - 覆盖 'val'时出现意外结果
在Scala 2.10.4中，给出以下类: scala> class Foo { | val x = true | val f = if (x) 100 else 200
Magento 覆盖 Controller
我想做上面的事情。我过去覆盖了许多文件...... block ，模型，助手......但这个让我望而却步。谁能看到我在这里做错了什么: (我编辑了这段代码......现在包括一些建议......
java - 参数顺序 - 覆盖
根据javadoc An instance method in a subclass with the same signature (name, plus the number and the ty
Java FileWriter 覆盖
我有一段代码，只要有可用的新数据作为 InputStream 就会生成新数据。每次都覆盖同一个文件。有时文件在写入之前变为 0 kb。 Web 服务会定期读取这些文件。我需要避免文件为 0 字节的情况

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城