Question

我有四列（每列25％的宽度），它们占据屏幕的宽度和高度的100％。想法是在每一列上关联一个图像，当用户将鼠标悬停在每一列上时，图像将更改为与列中的文本/图标相对应（图像本身应占据100％的宽度/高度）。

只有HTML + CSS才可能实现这种功能吗？我假设我需要一些JS。

到目前为止，除了跨所有列的图像之外，我已经在所有“工作”位置进行了设置。我尝试更改：

.col:hover { width: 100%; }

这对于第一列似乎还行，但是其他内容在悬停时会忽闪忽闪。

查看以下代码（我现在仅将颜色块用作图像）/ 或在此处查看CodePen：https://codepen.io/sdorr/pen/VqLzBQ

<!doctype html>
            <head></head>
            <body>
                <div class="container">
                    <a class="button" href="#">learn more</a>
                    <div class="col col-1">
                        <div class="vertical-align">
                            <h1 class="hero-text">data</h1>
                        </div>
                    </div>
                    <div class="col col-2">
                        <div class="vertical-align">
                            <h1 class="hero-text">intelligence</h1>
                        </div>
                    </div>
                    <div class="col col-3">
                        <div class="vertical-align">
                            <h1 class="hero-text">experience</h1>
                        </div>
                    </div>
                    <div class="col col-4">
                        <div class="vertical-align">
                            <h1 class="hero-text">activation</h1>
                        </div>
                    </div>
                </div>
            </body>

            <style>
            * {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            }

            .container {
                width: 100%;
                height: 100vh;
                position: relative;
            }

            .col {
                display: inline;
                float: left;
                width: 25%;
                height: 100vh;
                background-color: red;
                position: relative;
                text-align: center;
                z-index: 0;
                overflow: hidden;
            }

            .button {
                padding: 20px 0;
                width: 100%;
                background-color: purple;
                color: #ffffff;
                text-decoration: none;
                text-align: center;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                z-index: 1;
            }

            .button:hover {
                background-color: orange;
            }

            .col-1:hover {
                background-color: pink;
            }

            .col-2:hover {
                background-color: blue;
            }

            .col-3:hover {
                background-color: green;
            }

            .col-4:hover {
                background-color: yellow;
            }

            .vertical-align {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 100%;
            }
            </style>
            </html>

Answer 1

使用图像而不是颜色，并使其覆盖整个元素：

.col-1:hover {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: cover;
}

Answer 2

.col-1:hover {
   background-color: pink;
   background-image: url(...);
   background-repeat: no-repeat;
   width: 100%
}

这个怎么样？它对我有效。

https://codepen.io/progr4mm3r/pen/maJBda

Answer 3

我在这个问题上取得了一些不错的进展，并认为我会发布到目前为止的位置。肯定仍然需要解决一些问题，但是进展顺利。

该概念来自Joshua Johnson

在下面查看CodePen或源代码：

<!doctype html>
            <head>
                <meta name="viewport" content="width=device-width, initial-scale=1.0">  
            </head>
            <body>
                <div class="container">
                    <nav>
                        <ul>
                            <div class="col">
                                <li>
                                    <a href="#">data</a>
                                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm">
                                </li>
                            </div>
                            <div class="col">
                                <li>
                                    <a href="#">intelligence</a>
                                    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
                                </li>
                            </div>
                            <div class="col">
                                <li>
                                    <a href="#">experience</a>
                                    <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
                                </li>
                            </div>
                            <div class="col">
                                <li>
                                    <a href="#">activation</a>
                                    <img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg">
                                </li>
                            </div>
                        </ul>
                    </nav>
                    <img src="https://helpx.adobe.com/nz/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg">
                </div>
            </body>

            <style>
            * {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            }

            body {
                background: #333;
            }

            .col {
                width: 24.9%;
                height: 100vh;
                float: left;
                display: inline;
                border-right: 1px dashed #ffffff;
                text-align: center;
            }

            .col:last-child {
                border-right: none;
            }

            .container {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 100vh;
            }

            .container img {
                position: absolute;
                top: 0;
                left: 0;
                z-index: -60;
                width: 100%;
                height: 100vh;
            }

            .container li img {
                position: absolute;
                top: 0;
                left: 100%;
                z-index: -50;
                /*transition: all 1s ease;*/
                width: 100%;
                height: 100vh;
            }

            nav {
                width: 100%;
                height: 100vh;
            }

            ul {
                width: 100%;
                height: 100vh;
                list-style: none;
                text-align: center;
            }

            li {
                width: 100%;
                height: 100vh;
                display: flex;
                padding-top: 100px;
            }

            li a {
                z-index: 1;
                color: #ffffff;
                text-decoration: none;
                font-size: 36px;
                width: 100%;
                height: 100vh;
            }


            li a:hover + img {
                left: 0;
            }
            </style>

            <script type="text/javascript">
            </script>
            </html>

在悬停时更改图像（带有列）

3 个答案: