CSS icon difficult點擊

我已經想出了我自己的加號圖標，因爲字體真棒模擬似乎對我來說很厚。但我有一個問題：點擊圖標非常困難。用戶必須將光標正好放在負號上才能點擊圖標或查看工具提示。CSS icon difficult點擊

.plus { 
 
    position: relative; 
 
    width: 15px; 
 
    height: 15px; 
 
} 
 

 
.plus:before, 
 
.plus:after { 
 
    position: absolute; 
 
    left: 15px; 
 
    content: ' '; 
 
    height: 15px; 
 
    width: 2px; 
 
    background-color: grey; 
 
} 
 

 
.plus:before { 
 
    transform: rotate(90deg); 
 
}

<i id='new_contact' class="plus" title='Create contact' data-placement="left" data-toggle="tooltip" data-head="New sms"> 
 
\t \t \t </i>

來源

2017-04-04 Edgar Navasardyan

我覺得你的代碼是不完整的，不是嗎？ – Roberrrt

無論如何，像這些問題通常通過在圖標周圍添加一個小填充來解決。 – Roberrrt

使它內聯塊 - 你沒有高度或寬度的時刻，這就是爲什麼它不可點擊 – Pete

在這段代碼中，我已經改變了你的.plus有display: block;一個background: blue;和padding: 3px;向你展示它是如何工作的。

更改圖標本身的位置時，可能需要編輯類.plus:before以與填充對齊。

我希望這有助於！ http://jsfiddle.net/6rekek66/1/

.plus { 
 
    width: 15px; 
 
    height: 15px; 
 
    position: relative; 
 
    display: block; 
 
    background: blue; 
 
    padding: 3px; 
 
} 
 

 
.plus:before, 
 
.plus:after { 
 
    position: absolute; 
 
    left: 9px; 
 
    content: ' '; 
 
    height: 15px; 
 
    width: 2px; 
 
    background-color: grey; 
 
} 
 

 
.plus:before { 
 
    transform: rotate(90deg); 
 
}

<i id='new_contact' class="plus" title='Create contact' data-placement="left" data-toggle="tooltip" data-head="New sms"> 
 
\t \t \t </i>

來源

2017-04-04 09:18:58

要引用@pete，使它內聯塊，以確保它有高度和寬度。 – Roberrrt

@EdgarNavasardyan處理它。 –

你能告訴我你爲了達到這個目的而改變了什麼嗎？ –

基本上添加display: block將解決這個問題。在這裏，我還添加了一個臨時的粉紅色背景，以使可點擊區域更清晰，並調整了更多的值。

.plus { 
 
    position: relative; 
 
    display: block; 
 
    width: 15px; 
 
    height: 15px; 
 
    background: pink; 
 
} 
 

 
.plus:before, 
 
.plus:after { 
 
    position: absolute; 
 
    left: 7px; 
 
    content: ' '; 
 
    height: 15px; 
 
    width: 2px; 
 
    background-color: grey; 
 
} 
 

 
.plus:before { 
 
    transform: rotate(90deg); 
 
}

<a href="#"><i id='new_contact' class="plus" title='Create contact' data-placement="left" data-toggle="tooltip" data-head="New sms"> 
 
</i></a>

來源

2017-04-04 09:21:04 mayersdesign

CSS icon difficult點擊

回答

相關問題