Question

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

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

body元素包含一个div，其中background覆盖了整个窗口。我希望这个很大的div在中间某个位置包含一个较小的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;上方，父母就会从那里放大。

这是我试图在图片的特定区域实现CSS缩放效果的方法。每当我离开整个不可见的div时，我都希望巨大的背景返回其原始缩放。

这是一些代码。

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

}

}

Marketo

非常感谢！

Answer 1

->请将css更新到您的css文件中

 * {
   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;        
}
.indexPage > .indexInvisible {
  width: 80%;
  height: 80%;
  background: black;
  margin: 5% auto 0 auto;
  overflow: hidden;
  transition: transform .2s;
  -webkit-transition: transform .2s;
  -moz-transition: transform .2s;
  -ms-transition: transform .2s;
}
.indexPage:hover .indexInvisible {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
 }

<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">
    </head>
    <body>
        <div id="indexPage" class="indexPage">
            <div id="indexInvisible" class="indexInvisible"></div>
        </div>
    </body>
</html>

Answer 2

在内部div上使用background-image:inherit，在悬停时使用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>

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

2 个答案: