<html>
<head>
<style>
#line {
height: 1px;
width: 100%;
float: left;
background-color: #8e9194;
position: absolute;
top: 85%;
left: 0;
}
</style>
</head>
<body>
<button id="b1">Click Here</button>
<script>
var o = document.getElementById("line");
document.getElementById("b1").onmouseover = function () {
o.style.height = "10px";
};
document.getElementById("b1").onmouseout = function () {
o.style.height = "1px";
};
</script>
<div id="line"></div>
</body>
</html>
无法让此代码工作。我想做的就是在鼠标悬停时增加线条的大小，并在鼠标移开时将其恢复到 1px。
如果有任何方法可以将一些动画融入其中，那就太好了。
谢谢。
最佳答案
如果您还需要添加一些动画，我建议使用 jQuery 。它既快速又简单:
$(function() {
$("#b1").hover(function() {
$("#line").stop().animate({ height: 10 }, 1000);
}, function() {
$("#line").stop().animate({ height: 1 }, 1000);
});
});
关于javascript - 使用 Javascript 更改样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15856710/