但是有一个使用JS和CSS的演示。我一直在尝试修复它大约3-4个小时。
(仅供引用，经过2个小时的努力，我发现了一半的解决方案。我使用的是Safari，应该使用-webkit-transform。)现在，我尝试将css直接添加到元素中，并且可以使用，但是使用JS不能使用。
我已经下载了jquery-1.11.3.js并将其导入。
The lesson that I'm watching(ON 3:45:55)
当我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;
}
最佳答案
您可以使用: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
关于javascript - JS代码不起作用，尝试在CSS课中进行演示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30757326/