0

我正在尝试做两件事：

  1. 将我的 CodeIgniter 视图中的常规提交按钮（参见下面的代码）替换为具有翻转效果的精灵按钮。
  2. 提交我的 CodeIgniter 表单
<input type="submit" name="submit" value="Search" class="button" />

我的精灵图像（正常和悬停状态）都没有使用上面的代码显示。但是，如果我将其注释掉，并将其替换为以下内容，它会正确显示，但是我无法提交我的表单：

 <p class="button"><a href="#null"></a></p>

这是我的CSS：

.button {
    display:block;
    width:135px;
    height: 35px;
    text-indent:-9999px;
}
.button a {
    display:block;
    width: 100%;
    height: 100%;
    background:transparent url(../images/button-sprite.gif) no-repeat top left;
    outline:none;
}
.button a:hover {
    background-position: 0 -35px;
}

我究竟做错了什么？

解决方案：
感谢@AdityaSaxena 提供替代解决方案。我也找到了另一个解决方案：

我的.css 

.button {
    display:block;
    width:135px;
    height: 35px;
    text-indent:-9999px;
    background:transparent url(../images/button-sprite.gif) no-repeat top left; 
}

.button:hover {
    background-position: 0 -35px;
}

我的.html

// ...
<input type="submit" name="submit" value="Search" class="button" />
// ...
4

1 回答 1

1
  1. 您无法提交表单，因为您<input type="submit" />用锚标记替换了您的表单。您必须添加向<a>标签提交表单的功能
  2. .button a<a>无法正常工作，因为您的标签内没有任何标签<input type="submit">，这是您使用时所期望的.button a

html 和 js 几乎没有什么变化，一切都会开始为你工作。

您的新 HTML 保持不变。

<p class="button"><a href="#null"></a></p>

如果您可以使用它，您的 JS / Jquery 将变为：

$('.button a').on('click', function(){
  $(this).closest('form').submit();
});
于 2013-08-21T01:44:46.513 回答