我有一些看起来像这样的标记:
<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;
}
提交按钮的代码由后端生成,我无法更改,但spans
和divs
是可编辑的,因为它们是模板的一部分。我用简单的图形做了一个简单的例子来更好地展示问题:http://jsfiddle.net/UBS3z/
div保持滑动门的左侧部分,宽约10 px。跨度包含一个放置在文本左侧的图标。最后我们有了提交按钮。
问题在于,在视觉上,它看起来很好,当用户点击左侧滑动门或图像结束的区域时,按钮不会记录任何点击。这是非常糟糕的,因为按钮的大部分是无法点击的!单击按钮即可证明这一点。如果已经注册了单击,脚本将登录到控制台。
无论如何,使用CSS可以使这些区域可点击吗?我认为使用Javascript可以解决这个问题,但我更喜欢CSS解决方案。
答案 0 :(得分:1)
请参阅小提琴代码和演示
小提琴:http://jsfiddle.net/UBS3z/6/
演示:http://jsfiddle.net/UBS3z/6/embedded/result/
是的,你是对的,可以使用css只看你的要求的演示。
答案 1 :(得分:0)
我最终使用了javascript解决方案。虽然Dinesh的解决方案也可以,但背景图像非常复杂,所以我需要使用图像而不是背景颜色。这是问题的根本原因。
基本上,我只是编写了一个简单的脚本来挂钩button
div并点击提交表单的任何点击。