带有 .less 的自定义光标答案

【问题标题】：Custom cursor with .less带有 .less 的自定义光标
【发布时间】：2013-12-23 10:50:46
【问题描述】：

我正在使用带有 Gantry 驱动主题的 Joomla 2.5。我正在尝试使用 .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

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

【问题讨论】：

标签： css less joomla2.5

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

非常感谢亚诺的快速回复。我已经解决了这个问题，但我不得不添加一些我以前没有遇到过的其他东西。这是我现在的 .less 文件：

.aa {cursor: url(/images/listen.cur), progress !important;}

花了很长时间才让任何东西正常工作，直到我添加了

progress !important

光标改变了。我理解 !important，但我找不到任何关于进度 !important 的内容，尽管没有它就没有效果。再次感谢！如果没有您的相对路径帮助，任何事情都不会奏效。

【讨论】：

在 w3c 的某个地方，他们声明：“注意：始终在列表末尾指定通用游标，以防无法使用任何 URL 定义的游标”。虽然他们没有具体说明这一点，但如果第一个是url() 一个，它看起来应该总是至少指定两个游标。换句话说，一个最小的安全案例应该是cursor: url(...), auto;