Question

我正在尝试做两件事：

使用带有翻转效果的精灵按钮替换我的CodeIgniter视图中的常规提交按钮（请参阅下面的代码）。
提交我的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;
}

我做错了什么？

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

my.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;
}

my.html

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

Answer 1

由于您使用锚标记替换了<input type="submit" />，因此无法提交表单。您必须添加将表单提交到<a>代码
.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();
});

CSS Sprite在CodeIgniter提交按钮中不起作用

1 个答案: