我有一个无法运行的 JSFiddle 示例: http://jsfiddle.net/bjacobs/KDVvN/28/
我希望当鼠标悬停在该元素上时(这有效)该元素有一个张开的手,当鼠标点击它时有一个闭合的手(我无法开始工作)。
我知道我在 javascript 中做错了什么。谁能帮忙?
Javascript:
$(function () {
$(".dragbox h2").on("mousedown", function (evt) {
$(this).addClass('grabbing');
}).on("mouseup", function (evt) {
$(this).removeClass('grabbing');
});
});
CSS:
.dragbox {
margin:0px 2px 2px;
background:#fff;
position:relative;
}
.dragbox h2 {
font-size:15px;
cursor: grab;
cursor:-webkit-grab;
cursor:-moz-grab;
cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
.dragbox h2.grabbing {
cursor: grabbing;
cursor:-webkit-grabbing;
cursor:-moz-grabbing;
cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}
最佳答案
它可能不适用于文本元素。尝试按钮(但显然你必须开始拖动才能使其工作):
你可以只用 html/css 来做到这一点
此处演示:http://jsfiddle.net/KDVvN/37/
HTML
<button>Test Grab!</button>
CSS
button {
font-size:15px;
cursor: grab;
cursor:-webkit-grab;
cursor:-moz-grab;
cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
button:active {
cursor: grabbing;
cursor:-webkit-grabbing;
cursor:-moz-grabbing;
cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}
或者JS
此处演示:( http://jsfiddle.net/KDVvN/36/ )
HTML
<button>Test Grab!</button>
CSS
button {
font-size:15px;
cursor: grab;
cursor:-webkit-grab;
cursor:-moz-grab;
cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
button.grabbing {
cursor: grabbing;
cursor:-webkit-grabbing;
cursor:-moz-grabbing;
cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}
JS
$("button").on("mousedown", function (evt) {
$(this).addClass('grabbing');
}).on("mouseup", function (evt) {
$(this).removeClass('grabbing');
});
关于javascript - 用于更改元素上的 css 的 Javascript 是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14573248/