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

【问题标题】：JS Code didn't work, trying do a demo in css lessonsJS代码不起作用，尝试在css课程中做一个演示
【发布时间】：2015-06-10 13:09:17
【问题描述】：

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

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

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

The lesson that I'm watching（3:45:55）

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

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

【问题讨论】：

什么不起作用？至少告诉我们您期望的行为。
我希望当我点击 demoButton div 时它会缩小

标签： javascript jquery css visual-studio-code

【解决方案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

【讨论】：

最好的方法，但不幸的是，这可能不会在课堂上获得 OP 他们的分数......
哦，好吧...不能全部赢 ;)