Shahroz Asif Shahroz Asif - 3 months ago 8
CSS Question

Prevent cursor to change when not hovering on Text - CSS

In my site, I have set custom cursors. I set one for all the text tags named 'cur-text.png'. The problem is, the cursor would change on the same line as the text but I want it to change only when it is on the actual text.

I think what causes the problem: (CSS code) "

text-align: center;
".

I have tried:
margin-left: 50%;
. Due to custom sizing, the text is not properly centered. (Described in Demo)

Demo for the problem.



.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>





If you know the solution, or you need more clarification please reply.

Answer

The problem is caused by applying the cursor to a block-level element (in your case, the p tag).

I would recommend wrapping your text inside span and applying the class to them, that way they will be inline:

.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>