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);     }); }); 

demo: http://jsfiddle.net/8yssd/


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -