时间戳

首页 > 解决方案 > 将鼠标悬停在一个 DIV 上以缩放另一个 DIV

css - 将鼠标悬停在一个 DIV 上以缩放另一个 DIV

问题描述

我不确定这是否是一项简单的任务，但到目前为止我还没有成功。

让我稍微解释一下这个问题，以便您了解发生了什么。

该body元素包含一个div包含background覆盖整个窗口的 a 的元素。我希望这个非常大div的可以在中间的某个地方包含一个较小的。一个透明的。所以每当我将鼠标悬停在不可见div的地方时，父母就会从那里放大。

这是我试图在图片的某个区域完成 CSS 缩放效果。每当我离开整个不可见的 div 时，我都希望巨大的背景恢复到原来的缩放。

这是一些代码。

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script>

        </script>
    </head>
    <body>
        <div id="indexPage" class="indexPage">
            <div id="indexInvisible" class="indexInvisible"></div>
        </div>
    </body>
</html>

* {
    margin: 0;
    padding: 0;
}

body {
    line-height: 1.5;
    font-family: Arial, Tahoma;
    font-size: 12px;
}

.indexPage {
    background: url("map.jpg");
    width: 100%;
    height: 100%;
    background-size: cover;
    position: fixed;
    transition: transform .2s;

}

.indexPage > .indexInvisible {
    width: 80%;
    height: 80%;
    background: black;
    margin: 5% auto 0 auto;

}

提前非常感谢！

标签： csszooming

解决方案

background-image:inherit在内部 div 上使用 a并利用background-size悬停。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
}

.map {
  width: 860px;
  height: 480px;
  background-image: url(https://www.homesinc.com/wp-content/uploads/2017/05/1.jpg);
  margin: 10px;
  border: 5px solid red;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  ;
}

.zoomer {
  width: 80%;
  height: 80%;
  background: inherit;
  border: 3px solid blue;
  background-size: 125% 125%;
  transition: background-size .5s ease;
  background-position: center center;
}

.zoomer:hover {
  background-size: 150% 150%;
}
<div class="map">
  <div class="zoomer"></div>
</div>

推荐阅读