css - 带有 .less 的自定义光标

Question

我正在使用 Joomla 2.5 和 Gantry 驱动的主题。我正在尝试使用 .less 构建自定义文本类型，但我力不从心。 文本是可点击的，可以播放音频文件。现在我正在寻找一种干净的方法来更改站点范围内的文本属性，而无需每次都编辑每篇文章。我正在尝试在 .less 文件中创建一个自定义类，它将在悬停时更改鼠标光标，但我根本无法让它工作。

这是我设置音频的方式:

<audio type="audio/mpeg" id="all" src="images/audio/BlackFriday/p2.mp3"></audio>
<div class="aa"><a onclick="document.getElementById('p2').play()">Black Friday sales are not all they are cracked up to be.</a></div>

我正在尝试使用在 .less 文件中定义的类“aa”。以下是 .less 文件的全部内容:

/** audio playing text. includes font and cursor*/
.aa {
    cursor: url(images/headphones.cur);
}

我也尝试过使用 span 来调用类“aa”，但老实说，这对我来说是一个新领域，所以我可能会偏离我的处理方式。

这是 .less 文件的路径:

templates/rt_spectral/less/template-custom.less

对于光标文件:

images/headphones.cur

任何关于正在发生的事情的想法都会有很大的帮助。谢谢。

Answer 1

根据您提供的路径，CSS 中的路径不正确，应该是:

.aa {
    cursor: url(../../../images/headphones.cur);
}