Question

我打算制作一种便签式的风格，我希望在悬停未激活时首先显示框内的内容。就像我的代码示例中所示：请帮忙！

＆＃13;

body {
  margin: 45px;
}

.box {
  display:inline-block;
  background-color: pink;
  height: 200px;
  width: 200px;
  transition: transform 300ms ease-in-out;
  pointer-events: none;
}

.container {
  width: 200px;
  height: 200px;
  border: 20px solid grey;
  background-color: violet;
}

.container:hover .box{
  transform: translate(200px, 150px) rotate(20deg);
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="CSSTransitions.css">
    <script src="jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>CSS Transitions</title>
  </head>
  <body>
    <div class="container">
      <p>Hello</p>
    <div class="box"></div>
  </div>
  </body>
</html>

＆＃13;

fiddle

嘿伙计们，如果我对我想要达到的目标的解释不清楚，我很抱歉。有一个粉红色的盒子，当没有徘徊时是可见的，当它盘旋时，里面有一个紫罗兰色的盒子。当粉红色的盒子没有悬停时，我想隐藏紫罗兰色盒子里面的段落。但是我的代码在这里显示，即使粉红色的盒子也没有悬停，紫罗兰色盒子里面的段落已经显示出来了。

Answer 1

您必须设置内部div的 position: absolute ，即 .box ，将其放在文本上。请务必将 position: relative 设置为父级div，即 .container 。

绝对定位元素已从正常文档流中删除;没有为页面布局中的元素创建空间。相反，它定位   相对于其最近的祖先（如果有的话）;否则就是   相对于初始包含块放置。它的最终位置是   由顶部，右侧，底部和左侧的值确定。这个值   当z-index的值不是auto时，创建一个新的堆栈上下文。   绝对定位的盒子可以有边距，并且它们不会崩溃   与任何其他边缘。

More help on position property

＆＃13;

body {
  margin: 45px;
}

.box {
  display: inline-block;
  background-color: pink;
  height: 200px;
  width: 200px;
  transition: transform 300ms ease-in-out;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 20px solid grey;
  background-color: violet;
}

.container:hover .box {
  transform: translate(200px, 150px) rotate(20deg);
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="CSSTransitions.css">
  <script src="jquery-3.2.1.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>CSS Transitions</title>
</head>

<body>
  <div class="container">
    <p>Hello</p>
    <div class="box"></div>
  </div>
</body>

</html>

＆＃13;

我希望这会对你有所帮助。

如何在内容悬停后将内容放入盒子内？

1 个答案: