Question

任何人都可以告诉我为什么当我将鼠标悬停在“提交”按钮上时，它会突然/向右移动。我查看了我的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;

  }

当我在它上面盘旋时，我希望“提交”按钮能够改变颜色。

Answer 1

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

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

学习如何使用浏览器的开发人员工具使这种调试非常简单

Answer 2

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

第186行：）

Answer 3

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

}

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

border-left：3px solid＃e0e0e0;

Answer 4

你的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;即可。

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

4 个答案: