但有一个使用 JS 和 CSS 的演示。我已经尝试修复它大约 3-4 个小时。
(仅供引用，经过 2 小时的努力，我找到了一半的解决方案。我使用的是 Safari，但应该 -webkit-transform)现在我已经尝试将 css 直接添加到元素中并且它起作用了，但它不适用于 JS。
我已经下载了 jquery-1.11.3.js 并导入了它。
The lesson that I'm watching (上 3 点 45 分 55 秒)
当我点击 时什么也没有发生。为什么!？
登录.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>
登录CSS.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;
}
最佳答案
除了使用 JQuery，您还可以使用 :active 的 CSS 来完成它
#demoButton:active {
transform: scale(0.2, 0.2);
-webkit-transform: scale(0.2, 0.2);
}
文档:
关于javascript - JS 代码不起作用，尝试在 css 类(class)中做一个演示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30757326/