Question

我必须创建一个黑色背景颜色的网页，它应该有一个红色div，当我们将鼠标悬停在红色div上时，div的高度应该缓慢增加到页面顶部，当你删除从div开始你的鼠标高度应该随着它增加的速度而降低。下面是我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animate</title>
<script>

    function changeHeight() {
$('#first').animate({height:500},500);
}

</script>
</head>

<body style="background-color: black">
<div id="first" style="background-color: red; width: 10%; height: 50px" onMouseOver="changeHeight();"></div>

</body>
</html>

Answer 1

哈哈。

＆＃13;

html,body
{
   padding: 0;
   background: black;
}
div
{
  background: red;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20px;
  transition: all linear 5s;
}
div:hover
{
  height: 100%;
}

＆＃13;

<div></div>

＆＃13;

如果您想假装使用JavaScript，因为练习需要它：

＆＃13;

const div = document.querySelector("div");
div.addEventListener("mouseenter", () => div.classList.add("hover"));
div.addEventListener("mouseleave", () => div.classList.remove("hover"));

＆＃13;

html,body
{
   padding: 0;
   background: black;
}
div
{
  background: red;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20px;
  transition: all linear 5s;
}
div.hover
{
  height: 100%;
}

＆＃13;

<div></div>

＆＃13;

如何使用javascript慢慢增加div的高度

1 个答案: