当我将鼠标悬停在它上面时提交按钮移动答案

【问题标题】：Submit Button Moves when I hover over it当我将鼠标悬停在它上面时提交按钮移动
【发布时间】：2014-11-18 05:54:41
【问题描述】：

谁能告诉我为什么当我将鼠标悬停在“提交”按钮上时，它突然向右移动/移动。我查看了我的 php 和 css 文件，但不知道问题出在哪里。我在 Wordpress 上使用 WP 维护模式插件：https://wordpress.org/plugins/wp-maintenance-mode/ 我的网站：http://boasish.com

<div class="subscribe_wrapper" style="min-height: 100px;">
                <form class="subscribe_form buffer-inserted" novalidate="novalidate">
                    <input type="text" placeholder="Get notified when it is ready via email"      name="email" class="email_input" data-rule-required="true" data-rule-email="true" aria-required="true">
                    <input type="submit" value="Submit">
                </form>
            </div>

我知道 css 第 186 行的 :hover 输入

  .wrap form.subscribe_form input[type="submit"]:hover {
  background: #444444;
  color: #fff;
  border-left: 3px solid #e0e0e0;

  }

当我将鼠标悬停在提交按钮上时，我希望它改变颜色。

【问题讨论】：

标签： html css wordpress button plugins

【解决方案1】：

在你的 style.css 中（第 186 行）

.wrap form.subscribe_form input[type="submit"]:hover {
background: #444444;
color: #fff;
border-left: 3px solid #e0e0e0;
}

只需从 css 中删除 border-left: 3px solid #e0e0e0;.. 就可以了....

【讨论】：

【解决方案2】：

.wrap form.subscribe_form input[type="submit"]:hover {
  background: #444444;
  color: #fff;
  border-left: 3px solid #e0e0e0;

}

这是违规行，请从您的 css 中删除。

border-left: 3px solid #e0e0e0;

【讨论】：

我们真的需要三个完全相同的答案吗？
@3rror404 需要重复。

【解决方案3】：

.wrap form.subscribe_form input[type="submit"]:hover {
  background: #444444;
  color: #fff;
  border-left: 3px solid #e0e0e0;
}

第 186 行 :)

【讨论】：

【解决方案4】：

您正在:hover 上添加左边框，这会导致按钮移动：

.wrap form.subscribe_form input[type="submit"]:hover {
    background: #444444;
    color: #fff;
    border-left: 3px solid #e0e0e0;
}

学习如何使用浏览器的开发者工具让这种调试变得异常简单

【讨论】：

我知道，当我将鼠标悬停在提交按钮上时，我希望它改变颜色。有没有更好的方法？
@k65 你从某个地方复制了这个 CSS，不是吗？
如果你只是想改变颜色删除边框线