响应按钮似乎是两个按钮：悬停

Question

我试图让表单响应。

如果我现在将鼠标悬停在提交按钮上，则会出现两个按钮？

Example fiddle

示例图片：

代码：

.loudbutton:hover { cursor:pointer;
width: 90%;
height: 40%;
background-image: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light-2.jpg');
}

Answer 1

.loudbutton：hover {cursor：pointer; 网址（＆＃39; http://www.workbooks.com/sites/default/files/image/submit-button-2015-light-2.jpg＆＃39;）封面; }

Answer 2

问题是，当图像不足以填满整个元素时，它会重复图像。

添加background-size: 100% 100%以使其填充按钮而不重复：

.loudbutton:hover { cursor:pointer;
    width: 90%;
    height: 40%;
    background-image: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light-2.jpg');
    background-size: 100% 100%;
}

也就是说，正如Denis指出的那样，使用CSS可以很容易地完成这种图像，因此您根本不需要图像文件。 Updated Fiddle without the image

Answer 3

悬停时设置的背景图像不如按钮宽。 您可以使用CSS在不使用图像的情况下实现相同的结果，而不是使用背景图像，从而节省了http请求。

Answer 4

将css更改为

 override func setUp() {
    super.setUp()
  if !DataModelLayerOperation.isUserLoggedIn() {
    //do something
  }
}