Question

文件上传按钮有点麻烦。我不能为我的生活让mouseenter和mouseover效果在没有闪烁的情况下发挥作用。

我认为这可能是相当简单的事情，但我是一个jquery新手。

这是小提琴：

jsfiddle.net/dingobruce/tdgn2/4 /

jquery：

$(function(){
    var btnUpload=$('#upload_main');
    new AjaxUpload(btnUpload); });
$( "#upload_main" ).mouseenter(function() {
$( "#upload_main" ).addClass("upload_button_on" );});
$( "#upload_main" ).mouseleave(function() {
$( "#upload_main" ).removeClass("upload_button_on" );});

和html代码：

<div id="container">
<div id="upload_main" class="upload_button">
Upload
</div>
</div>

和CSS

.upload_button {
 border-color:#DADADA;
 color:#000000;
 border-width:1px;
 border-style:solid;
 font-family:'gothic_bold';
 font-size:13px;
 background:#ECECEC;
 text-align:center;
 text-transform:uppercase;
 padding:5px;
 width:115px;
}

.upload_button_on {
 color:#FFFFFF;
 background:#000;
 text-decoration:none;
 border-color:#000000;
 cursor:pointer;
}

非常感谢任何帮助或指示！

谢谢，

dingobruce

Answer 1

您的代码功能正常，但与您正在使用的AjaxUpload插件存在冲突。

插件添加了一个悬停类，您可以使用它来应用您的样式 - demo

将CSS中的.upload_button_on更改为.hover

.hover {
    color:#FFFFFF;
    background:#000;
    text-decoration:none;
    border-color:#000000;
    cursor:pointer;
 }

文件上传按钮使用鼠标悬停和使用Jquery的mouseleave闪烁

1 个答案: