我打算制作一种便签样式，并且我想在悬停未激活时显示框内的内容而不首先显示它。就像我的代码示例中的这里一样:请帮忙!
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);
}<!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>大家好，如果我对我想要实现的目标的解释不清楚，我深表歉意。没有悬停时有一个粉红色的盒子可见，悬停时里面有一个紫色的盒子。当粉红色框未悬停时，我希望隐藏紫色框内的段落。但是我的代码在这里显示，即使粉红色框没有悬停，紫色框内的段落也已经显示。
最佳答案
您必须设置内部 div 的 position: absolute 即 .box 以将其放置在上方文本。请记住将 position: relative 设置为父 div，即 .container。
Absolute positioned element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.
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);
}<!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>希望对您有所帮助。
关于javascript - 悬停后如何将内容放入框中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48184602/