javascript - 悬停时用特定类别扩大一个部门

Question

我想在 HTML 中创建一个分区，它在 hover 上变得稍微大一些，并且通过一个新的分区扩展现有的分区。

我想我需要为此使用 JavaScript，因为有一个 onmouseover 函数。

任何人都可以指导我查找什么样的信息，或者在哪里可以找到合适的代码结构。

我正在寻找的示例 is here :

一旦将鼠标悬停在上面，就会有一个显示新内容的框。

Answer 1

.box {width:300px;height:200px;overflow:hidden;background-color:blue;}
.text{height:200px;padding:20px;margin:auto;color:white;box-sizing:border-box}
.secret-text { height:200px;margin:auto;background-color:red;}
.box:hover{height:auto}

<div class="box">
<div class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</div>
<div class="secret-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</div>
</div>

我认为您不需要为此使用 javascript。您在给定的示例中隐藏了“awards-jobs”容器，显示为:无或父 div 中的特定高度和溢出:隐藏。然后将鼠标悬停在父 div 上，分别设置 display:block 或 height:auto。