使用滑动门设置提交按钮时处理“死区”

时间:2012-04-13 10:33:22

标签: css button sliding-doors

我有一些看起来像这样的标记:

<div class="button">
   <span class="image"></span>
   <input type="submit" value="Test button">
</div>

CSS:

.button{
  background: url('http://img33.imageshack.us/img33/4108/leftd.png');
  width: 10px;
  display: inline-block;
  height: 15px;
}

.image{
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  background: url('http://img339.imageshack.us/img339/3112/arrow090.png');
  margin-left: 13px;
}

.button input{
  background: url('http://img853.imageshack.us/img853/7212/righthw.png');
  border: 0;
  display: block;
  font: 11px sans-serif;
  margin-left: 10px;
  padding-left: 23px;
  padding-right: 10px;
  color: #FFFFFF;
  width: auto;
  height: 15px;
}

提交按钮的代码由后端生成,我无法更改,但spansdivs是可编辑的,因为它们是模板的一部分。我用简单的图形做了一个简单的例子来更好地展示问题:http://jsfiddle.net/UBS3z/

div保持滑动门的左侧部分,宽约10 px。跨度包含一个放置在文本左侧的图标。最后我们有了提交按钮。

问题在于,在视觉上,它看起来很好,当用户点击左侧滑动门或图像结束的区域时,按钮不会记录任何点击。这是非常糟糕的,因为按钮的大部分是无法点击的!单击按钮即可证明这一点。如果已经注册了单击,脚本将登录到控制台。

无论如何,使用CSS可以使这些区域可点击吗?我认为使用Javascript可以解决这个问题,但我更喜欢CSS解决方案。

2 个答案:

答案 0 :(得分:1)

请参阅小提琴代码和演示

小提琴:http://jsfiddle.net/UBS3z/6/

演示:http://jsfiddle.net/UBS3z/6/embedded/result/

是的,你是对的,可以使用css只看你的要求的演示。

答案 1 :(得分:0)

我最终使用了javascript解决方案。虽然Dinesh的解决方案也可以,但背景图像非常复杂,所以我需要使用图像而不是背景颜色。这是问题的根本原因。

基本上,我只是编写了一个简单的脚本来挂钩button div并点击提交表单的任何点击。