JS 代码不起作用，尝试在 css 节课中做一个演示

Question

但是有一个使用 JS 和 CSS 的演示。我一直在尝试修复它大约 3-4 个小时。

（仅供参考，经过 2 小时的努力，我找到了一半的解决方案。我使用的是 Safari，但应该 -webkit-transform）现在我已经尝试将 css 直接添加到元素中并且它起作用了，但它不适用于 JS。

我已经下载 jquery-1.11.3.js 并导入它。

而当我 click 什么也没发生。为什么！？

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

Answer 1

您可以使用 :active

CSS 而不是使用 JQuery

#demoButton:active {
    transform: scale(0.2, 0.2);
    -webkit-transform: scale(0.2, 0.2);
}

文档：

http://www.w3schools.com/cssref/sel_active.asp

JS 代码不起作用，尝试在 css 节课中做一个演示

JS Code didn't work, trying do a demo in css lessons

javascript

css

jquery

visual-studio-code