Question

我创建了两个提交按钮：

http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg
http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg

我希望第一个显示为我的标准提交按钮（暗）和第二个（灯光）显示在悬停上。

我的代码如下：

 <input name="submit" id="submit" type="image" src="http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg" width="314" height="40" value="Sign up" /></div>

CSS是：

submit:hover { background-image: url ('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg');

然而，悬停图像没有显示，任何想法为什么？

Answer 1

您的CSS选择器对于提交按钮无效，您需要将CSS中的按钮引用为：

这将设置所有提交按钮的样式。

  input[type=submit] { }

这将仅设置ID为＆＃39;提交＆＃39;

的元素（这种情况下为提交按钮）

  #submit { }

例如：

   input[type=submit]:hover { background-image: url ('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg');

如果您想要设置所有提交按钮的背景，并且具有相同的悬停效果，您应该使用：

    input[type=submit]:hover {  background-image: url ('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg'); }

    input[type=submit] { background-image: url: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg'); }

Answer 2

试试这个。，

<input name="submit" id="submit" type="image" width="314" height="40" value="Sign up" />

input#submit{
  background: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg');
}
input#submit:hover { 
background: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg');
}

Answer 3

您需要删除输入的src属性，并以类似的方式使用background-image，就像您在悬停时尝试的那样。您的尝试失败有两个原因 - 一个是您在通过它的id（或名称）引用元素之前错过了哈希值，然后即使您执行此步骤也无法看到背景图像，因为输入的src属性。
你可以用这种简单的方式做到这一点：
fiddle

    <input type="submit" id="submit" width="314" height="40" value="" />

和：

    #submit { 
       border:0;
       width:314px;
       height:40px;
       background-image: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg'); 
    }
    #submit:hover { background-image: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg');}
    #submit:focus, #submit:active {
       outline:none;
    }

编辑：
你还在输入标签的末尾有一个结束div - 它可能是你整个代码的剩余部分，但是如果不打开div就会使HTML无效。

Answer 4

为什么不将其更改为使用CSS，这样您就可以重新使用样式并更新按钮中的文本而无需创建新图像。

HTML：

<button type="submit">Start Trial &#9658;</button>

CSS：

button {
    background: #4e6ea1;
    height: 40px;
    width: 200px;
    color: #fff;
    border: 1px solid #444;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
}

button:hover {
    background: #84a3d9;
}

Answer 5

通过将基本图像指定为src，您无法使用css更改它，您需要使用javascript来执行此操作。为了用css实现，你需要做这样的事情。

 <input name="submit" id="submit" type="submit" class="submit" value="Sign up" />

.submit {
  background:url(http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg);
  text-indent: -9999px; 
  text-transform: capitalize;
  height:40px;
  width: 314px;
  border:0;
 }

.submit:hover{
   background:url(http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg);
 }

注意：文本转换是针对ie7

Answer 6

<input name="submit" id="submit" type="image" src="http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg" onMouseOver="this.src='http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg'" onMouseOut="this.src='http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg'" width="314" height="40" value="Sign up" />

使用onMouseOver属性

Answer 7

您必须将按钮的初始图像设置为css-background属性，并将其定义为html src属性。

新HTML（我还添加了一个提交类，不使用ID进行按钮音节化）：

＆＃13;

<input name="submit" id="submit" class="submit" type="image" width="314" height="40" value="Sign up" /></div>

＆＃13;

新CSS（也添加了类指示符。）：

＆＃13;

.submit { 
  background-image: url ('http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg');
}

.submit:hover { 
  background-image: url ('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg');
}

＆＃13;

Answer 8

问题是你首先必须给按钮一个背景图像，然后在用户将其悬停时指定一个新按钮，否则它将被隐藏在后面。

 <input name="submit" id="submit" type="image" width="314" height="40" value="Sign up" />

input { 
    background-image: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-dark.jpg');
}

input:hover { 
    background-image: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light.jpg');
}

小提琴：http://jsfiddle.net/rdxfye9e/

在悬停的不同的色的提交按钮 - HTML

8 个答案: