悬停时按钮向右移动答案

【问题标题】：Button moves to the right on hover悬停时按钮向右移动
【发布时间】：2018-01-13 22:26:04
【问题描述】：

我正在使用 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，并且位置从无更改为“位置：绝对；”

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

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

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

【问题讨论】：

只有这个还不足以让我们找出问题所在。这应该可以正常工作，但也许您还有其他一些干扰的 CSS。这就是应用于该按钮的所有 CSS 吗？
您可以在自定义 css 中尝试此行。输入[type="button"], input[type="button"]:hover{float:left !important;}
我在您发布的内容中找不到任何会导致这种转变的内容。如前所述，各种 CSS 状态是相同的。 jsfiddle.net/uyz1s47t
显然这些 CSS 不是问题所在。你的 CSS 中一定有其他东西导致了这种转变。您可以使用 Chrome 开发人员工具检查正在应用哪些规则，只需检查元素并使用 :hov 按钮应用过滤器即可比较两种状态并检查冲突规则的来源

标签： javascript css wordpress

【解决方案1】：

您的问题在于 file_input_button_hover 类，请将 left 值设置为 0

【讨论】：