css - Change style with Javascript -
<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 code work. i'm trying increase size of line on mouseover , 1px on mouseout.
it nice if theres way incorporate animation this.
thanks.
if need add animation, i'd suggest use jquery. fast , easy:
$(function() { $("#b1").hover(function() { $("#line").stop().animate({ height: 10 }, 1000); }, function() { $("#line").stop().animate({ height: 1 }, 1000); }); });
Comments
Post a Comment