Question

在我的网站中，我设置了自定义游标。我为所有名为＆＃39; cur-text.png＆＃39;的文本标签设置了一个。问题是，光标会在与文本相同的行上发生变化，但我希望它只有在实际文本上才能更改。

我认为导致问题的原因是：（CSS代码）＆＃34; text-align: center;＆＃34;。

我尝试过：margin-left: 50%;。由于自定义大小调整，文本未正确居中。（在演示中描述）

Demo解决了这个问题。

＆＃13;

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

＆＃13;

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

＆＃13;

如果您知道解决方案，或者需要更多说明，请回复。

Answer 1

默认情况下，

<p>元素占用容器的整个宽度。您需要将它们更改为<span>元素，然后相应地定位它们。这是你的第一次尝试＆＃34;编辑为<span>：

https://jsfiddle.net/85ympta0/

如果您将以下CSS添加到<span>元素中，它会将它们置于中心位置：

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

以下是行动中的一小部分：https://jsfiddle.net/agdzv2kr/

Answer 2

问题是由将光标应用于块级元素（在您的情况下为p标记）引起的。

我建议将您的文字包装在span中并将该类应用于它们，这样它们就会内联：

＆＃13;

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

＆＃13;

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

＆＃13;

不悬停在Text - CSS上时防止光标改变

2 个答案: