如何使用CSS为表单内的按钮设置动画？

Question

index.html，表单为：

<form id="mc-embedded-subscribe-form" class="validate" name="mc-embedded-subscribe-form" method="post" action="mailing.php"><pre>
<fieldset>
<div class="mc-field-group">
<div class="input-cont">
<input id="email" class="required email input-text example" type="text" name="email" value="Your email address" onfocus="value=''" style="color: rgb(178, 178, 178);">
</div>
</div>
<div class="submit-cont">
<input id="submit" class="input-submit" type="submit" name="subscribe" value="">

现在

CSS：

#content form #submit {
    background: url("../img/join-button.png") no-repeat left top;
    border: 0 none;
    color: #221505;
    cursor: pointer;
    float: right;
    font-size: 23px;
    font-weight: 800;
    height: 46px;
    outline: 0 none;
    position: relative;
    top: 1px;
    width: 102px;

在这种情况下如何指定：hover和a：活动属性并更改背景图片，因为我的html中没有任何值，或者有更好的方法吗？感谢。

Answer 1

这应该有效

#content form #submit:hover {
  background-image: ...
}

#content form #submit:active {
  background-image: ...
}