如何讓<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>上面有一個按鈕，可點擊（如按鈕）？

回答

相關問題