如何使按钮上方的 <Span> 可点击（作为按钮）？答案

【问题标题】：how to make <Span> above a button, clickable (as the button)?如何使按钮上方的 <Span> 可点击（作为按钮）？
【发布时间】：2014-09-22 06:22:45
【问题描述】：

See this fiddle

一方面我希望“眼睛”图标像现在一样显示（在按钮上方，所以我认为 z-index 没有帮助），但另一方面我想要按钮在其所有表面都可点击，在眼睛区域也是如此。

另外，有没有更好的方法来定位眼睛？因为一旦我使用不同的文本然后“点击我”，我将不得不相应地设置眼睛的绝对位置。有什么方法可以更好地定义它？

<form action="1.php" method="POST" target="_blank">
    <input type="submit" class="button" value="Click Me"><span class="fa fa-eye fa-lg foo" "></span>
</form>

.foo{
     color:red;
    font-size:1.7em;
    position: absolute;
    height: 11px;
    top: 18px;
    left: 15px;
    pointer-events: none;
}

.button {
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: baseline;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: inherit;
    font-family: arial;
    font-size: 17px;
    padding: .5em .9em .5em 2em;
    text-decoration: none;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

【问题讨论】：

您必须使用<input type="submit"> 还是可以使用button？
一定要用输入法，好的我加代码

标签： html css css-position z-index positioning

【解决方案1】：

就使其可点击而言，您可以将pointer-events: none 添加到元素中。这实际上允许您单击元素。

Updated Example

.foo {
    pointer-events: none;
    color: red;
    /* Other styles.. */
}

对该属性的支持可以是found here。

另一种选择是将两个元素都包装在label 中。点击标签时，触发input元素，从而解决问题。

Example Here

<label>
    <span class="fa fa-eye fa-lg foo"></span>
    <input type="submit" class="button" value="Click Me"/>
</label>

【讨论】：

酷，谢谢，我猜它在 IE9 和 8 上不受支持？这些 IE 版本也有解决方案吗？
刚刚看到您的支持链接，还有其他支持 IE10（甚至可能是 9 和 8）的选项吗？
太棒了，两个问题：1。我希望按钮在悬停时改变颜色，有没有办法用你建议的标签来做到这一点，同时悬停在span上？（我认为使用当前代码是不可能的） 2. 有没有办法将您的两种解决方案结合起来，比如将 pointer-events 作为默认值，并将标签作为 IE7-10 的后备？
@rockyraw 喜欢this，或this。不确定你要的是哪一个——可能是前者。
不完全是，我的意思是，基本上，我有一个很长的按钮 CSS 代码：悬停（渐变）。因此，当有人将鼠标悬停在按钮上时，外观会发生变化。我希望整个按钮表面的外观发生确切的变化，这意味着当有人将鼠标悬停在跨度上时。