<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>
Can not get this code to work. All i'm trying to do is increase the size of the line on mouseover and get it back to 1px on mouseout.
It would also be nice if theres any way to incorporate some animation into this.
Thanks.
If you also need to add some animation, I'd suggest to use jQuery. It is fast and easy:
$(function() {
$("#b1").hover(function() {
$("#line").stop().animate({ height: 10 }, 1000);
}, function() {
$("#line").stop().animate({ height: 1 }, 1000);
});
});