使用 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

如此简单的任务不需要 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>

Answer 2

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 3

您可以通过 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>

使用 javascript 增加元素大小

grow element size using javascript

html

javascript

css

css-transitions