如何让<Span>上面有一个按钮，可点击（如按钮）？

See this fiddle 如何让<Span>上面有一个按钮，可点击（如按钮）？

我想一方面是“眼睛”图标显示为现在（上面的按钮，所以我不认为一个的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); 
}

来源

2014-09-21 rockyraw

你有使用''或者你可以使用一个'button'？ – 2014-09-21 21:54:56

必须使用输入，好吧，我会添加代码 – rockyraw 2014-09-21 21:59:27

在使其可点击的方面，您可以将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>

来源

2014-09-21 21:54:29

很酷，谢谢，我想它不支持，虽然在IE9和8？有没有这些IE版本的解决方案？ – rockyraw 2014-09-21 21:57:08

刚刚看到您的支持链接，IE10支持另一种选择（甚至可能是9和8）吗？ – rockyraw 2014-09-21 21:58:50

真棒，两个问题： 1.我希望按钮在悬停时改变颜色，有没有办法用你建议的标签来做到这一点，而悬停在'span'上？（因为我认为目前的代码是不可能的） 2.有没有一种方法可以将您的两个解决方案组合起来，比如将'pointer-events'作为默认值，并将标签作为IE7-10的后备？ – rockyraw 2014-09-21 22:33:12

如何让<Span>上面有一个按钮，可点击（如按钮）？

回答

相关问题