Question

我正在使用WordPress文件上传插件并且工作正常，但是在悬停按钮以选择要上传的文件时，按钮会向右移动。我认为以下CSS是重要的部分。

input[type="button"].file_input_button{
    width:100px;
    height:27px;
    position:absolute;
    top:0;
    margin:0;
    padding:0;
    background-color:#EEE;
    color:#555;
    background-image:url(white-grad-active.png);
    background-position:left top;
    background-repeat:repeat-x;
    border-style:solid;
    border-width:1px;
    border-color:#BBB;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -khtml-border-radius:2px;
    border-radius:2px
}
input[type="button"].file_input_button_hover{
    width:100px;
    height:27px;
    position:absolute;
    top:0;
    margin:0;
    padding:0;
    background-color:#EEE;
    color:#111;
    background-image:url(white-grad-active.png);
    background-position:left top;
    background-repeat:repeat-x;
    border-style:solid;
    border-width:1px;
    border-color:#333;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -khtml-border-radius:2px;
    border-radius:2px
}
input[type="button"].file_input_button:disabled,input[type="button"].file_input_button_hover:disabled{
    width:100px;
    height:27px;
    position:absolute;
    top:0;
    margin:0;
    padding:0;
    background-color:#EEE;
    color:silver;
    background-image:url(white-grad-active.png);
    background-position:left top;
    background-repeat:repeat-x;
    border-style:solid;
    border-width:1px;
    border-color:#BBB;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -khtml-border-radius:2px;
    border-radius:2px
}

导致此问题的CSS代码是什么？如何删除此行为？我可以禁用.file_input_button_hover CSS吗？

它附带插件的CSS，我无法摆脱它。

更新：

使用Chrome的开发人员工具我看到在悬停时，按钮的类从file_input_button更改为file_input_button_hover，并且位置从无变为“position：absolute;”

我不知道为什么但是将以下内容添加到自定义CSS中解决了这个问题：

input[type="button"].file_input_button_hover{
position: relative !important;
}

input[type="button"].file_input_button_hover{
position: relative !important;
}

Answer 1

问题出在file_input_button_hover上，将left值设为0

按钮在悬停时向右移动

1 个答案: