使用javascript增大元素大小

Question

我正在进行一个项目，将鼠标悬停在图像上，会出现一个包含图像信息的隐藏元素。我使用javascript执行此功能。然而，当我将鼠标悬停在图像上时，我希望图像大小能从很小优雅地增长到正常大小。

我有一个小代码演示，下面有一个文本而不是图像：

function showinfo(){
document.getElementById("hidden").style.visibility="visible";
}
function noinfo(){
document.getElementById("hidden").style.visibility="hidden";
}

#hidden{
width:100px;
height:100px;
background-color:green;
visibility:hidden;
}

<p id="hover" onmouseover="showinfo()" onmouseout="noinfo()">
Hover over me !</p>
<div id ="hidden">  
I am the hidden text !
</div>

我将感谢你的帮助，指导我完成这项小任务。提前谢谢。

Answer 1

function showinfo() {
document.getElementById("hidden").style.visibility = "visible";
}
function noinfo() {
document.getElementById("hidden").style.visibility = "hidden";
}

#hidden {
width: 0;
height: 100px;
background-color: green;
visibility: hidden;
padding: 10px;
transition: width 2s;
color:#fff;
font-size:20px;
}
#hover:hover~#hidden {
width: 100%
}

<p id="hover" onmouseover="showinfo()" onmouseout="noinfo()">
Hover over me !
</p>
<div id ="hidden">  
I am the hidden text !
</div>

Answer 2

您可以通过css实现这一点。

#hidden_text {
transform: scale(0);
transform-origin: 50 50;
transition: transform 2s 0s;
width:100px;
height:100px;
background-color:green;
}
#hover:hover ~ #hidden_text {
transform: scale(1);
}

<p id="hover">Hover over me !</p>
<div id="hidden_text">  
I am the hidden text !
</div>

Answer 3

这样简单的任务不需要foor JS。您可以简单地使用CSS中的：hover标记并添加一个过渡标记来获得您想要的缓慢增长的动画。

.image {
width: 200px;
height: 100px;
background-color: blue;
}
.image:hover {
width: 500px;
height: 250px;
background-color: blue;
transition: width 2s, height 2s;
}

<div class="image">I'm an Image</div>