我想专门为我的按钮创建悬停和单击效果,但是以一种不同于悬停按钮的方式将其更改为不同的按钮,因此我需要使用 JavaScript,而不是 CSS。
我有以下 jQuery:
// Highlights Browse button when the user hovers over div.upload
$(".upload").hover(
function() {
$("input[type='button']").addClass("browse-hover");
},
function() {
$("input[type='button']").removeClass("browse-hover");
}
);
// Darkens Browse button when user clicks on div.upload
$(".upload").mousedown(function() {
$("input[type='button']").addClass("browse-active");
});
$(".upload").mouseup(function() {
$("input[type='button']").addClass("browse-active");
});
添加了我的主 CSS 文件中的以下类:
.browse-hover {
background: #9972ad; /* Old browsers */
background: -moz-linear-gradient(top, #9972ad 0%, #7a3e99 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9972ad), color-stop(100%,#7a3e99)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9972ad 0%,#7a3e99 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9972ad 0%,#7a3e99 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9972ad 0%,#7a3e99 100%); /* IE10+ */
background: linear-gradient(to bottom, #9972ad 0%,#7a3e99 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9972ad', endColorstr='#7a3e99',GradientType=0 ); /* IE6-8 */
}
.browse-active {
background: red;
}
HTML:
<div class="upload-form">
<form action="" method="post" enctype="multipart/form-data">
<div class="upload">
<input type="file" name="file-input">
<span class="input-filename">Select a file...</span>
<input type="button" value="Browse">
</div>
<input type="submit" name="submit" value="Upload">
<span class="valid-formats">Valid input: .txt files <= 512 KB</span>
</form>
</div>
我使用 addClass() 的方式应该覆盖以前的值,因为在(渐变)之前设置了一个背景,我在悬停时会改变它。它根本不起作用。它已正确连接,如果我单击警报集,它将正确执行。