javascript - JS Code didn't work, trying do a demo in css lessons -
but there's demo uses js , css. have been trying fix 3-4 hours.
(fyi after 2 hours struggling have found half of solution. i'm using safari , should -webkit-transform) have tried css added directly element , worked, doesn't worked using js.
i have download jquery-1.11.3.js , import it.
the lesson i'm watching (on 3:45:55)
and when click nothing happened. why!?
login.html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> </title> <link rel='stylesheet' type="text/css" href='logincss.css' /> </head> <body> <div id="banner">please login!</div> <form> <div> <label for="name">name:</label> <input type="text" name="name" /> </div> <div> <label for="email">email:</label> <input type="text" name="email" /> </div> <div id="demobutton" class="default"> submit! </div> </form> <script src="jquery-1.11.3.js"></script> <script> $(function () { $('#demobutton').mousedown(function () { $(this).removeclass('default'); $(this).addclass('shrink'); }); $('#demobutton').mouseup(function () { $(this).removeclass('shrink'); $(this).addclass('default'); }); }); </script> </body> logincss.css
html { font-size: 16px; font-family: verdana; } label { float: left; width: 75px; } div { margin-bottom: .4em; } #banner { background-color: lightblue; color: white; width: 100%; font-size : 4em; text-align: center; } #demobutton { font-weight: bold; color: white; background-color: blue; height: 1.25em; width: 6em; text-align: center; padding-top: .3em; -webkit-user-select: none; cursor: crosshair; } #demobutton::selection { color: black; background-color: yellow; } .shrink{ transform: scale(0.2, 0.2); -webkit-transform: scale(0.2, 0.2); } .default { transform: none; -webkit-transform: none; }
instead of using jquery can css using :active
#demobutton:active { transform: scale(0.2, 0.2); -webkit-transform: scale(0.2, 0.2); } docs:
Comments
Post a Comment