防止光標在不懸停在文本上時更改 - CSS

在我的網站中，我設置了自定義遊標。我爲所有名爲'cur-text.png'的文本標籤設置了一個。問題是，光標會與文本在同一行上改變，但我希望它只在實際文本上改變。防止光標在不懸停在文本上時更改 - CSS

我認爲是什麼導致了這個問題:(CSS代碼）「text-align: center;」。我已經嘗試過：margin-left: 50%;。由於自定義大小，文本不正確居中。（在演示中描述）

Demo問題。

.custom { 
 
    text-align: center; 
 
    font-size: 30px; 
 
    cursor: url('http://decomplex.xyz/cur7.cur'), auto; 
 
} 
 
.custom2 { 
 
    margin-left: 50%; 
 
    font-size: 30px; 
 
    cursor: url('http://decomplex.xyz/cur7.cur'), auto; 
 
} 
 
.custom3 { 
 
    margin-left: 43%; 
 
    margin-right: 43%; 
 
    font-size: 30px; 
 
    cursor: url('http://decomplex.xyz/cur7.cur'), auto; 
 
}

<h1> 
 
First Try: 
 
</h1> 
 
<p class="custom"> 
 
Hello! 
 
</p> 
 
<p> 
 
<b>Problem:</b> Try hovering the cursor on the same line as the text above. That is the problem :-(. 
 
</p> 
 
<br> 
 
<h1> 
 
Second Try: 
 
</h1> 
 
<p class="custom2"> 
 
Hello! 
 
</p> 
 
<p> 
 
<b>Problem:</b> Here, the cursor is not visible before the text, which is good, but it is still there after the text. Another problem is the text is not perfectly centered even after using:<p> 
 
<pre>margin-left: 50%</pre> 
 
<br> 
 
<h1> 
 
Third Try: 
 
</h1> 
 
<p class="custom3"> 
 
Hello! 
 
</p> 
 
<p> 
 
<b>Problem:</b> I am able to remove cursor on the right, but text is not perfectly centered and will cause problem on pieces of code with other classes 
 
</p>

如果你知道解決的辦法，或者你需要更多的澄清，請回復。

來源

2016-08-16 Shahroz Asif

在未來，請在問題本身的所有代碼而不是在第三方網站上。 –

哦，忘了包括我在趕時間的代碼。 –

該問題是由將光標應用到塊級元素（在您的情況下爲p標記）引起的。

我建議環繞你的文字裏span和應用類的給他們，這樣他們將內聯：

.customCursor { 
 
    cursor: url('http://decomplex.xyz/cur7.cur'), auto; 
 
    color: red; 
 
    font-weight: bold; 
 
}

<p>Lorem <span class="customCursor">ipsum</span> dolor sit amet, consectetur adipisicing elit. Assumenda quod itaque ipsum tempora sequi sit at enim impedit, est, modi accusamus illo, doloremque ipsa incidunt voluptatem dicta dignissimos ipsam magni.</p>

來源

2016-08-16 16:19:01 Aziz

<p>默認情況下，元素佔據容器的整個寬度。您需要將它們更改爲<span>元素，然後相應地放置它們。這是您的撥弄「第一次嘗試」編輯成<span>：

https://jsfiddle.net/85ympta0/

如果添加以下CSS到你的<span>元素，這將圍繞他們爲你：

span.custom { 
    display: table; 
    margin: 0 auto; 
}

這是一個小提示：https://jsfiddle.net/agdzv2kr/

來源

2016-08-16 16:17:44

防止光標在不懸停在文本上時更改 - CSS

回答

相關問題