问题
I am using Joomla 2.5 with a Gantry-powered theme. I am trying to build a custom text type with .less, and I am way out of my depth. The text is clickable, and that plays an audio file. Now I am looking for a clean way to be able to change the text attributes site-wide without editing every article every time. I am trying to make a custom class in a .less file that will change the mouse cursor on hover, but I can't get it to work at all.
Here is how I set up the audio:
<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>
I am trying to use the class "aa", which is defined in a .less file. Here are the entire contents of the .less file:
/** audio playing text. includes font and cursor*/
.aa {
cursor: url(images/headphones.cur);
}
I have also tried using span to call the class "aa", but to be honest this is new territory for me so I may be way off with how I'm going about this.
This is the path for the .less file:
templates/rt_spectral/less/template-custom.less
And for the cursor file:
images/headphones.cur
Any thoughts on what is going on would be a huge help. Thanks.
回答1:
Based on the paths you're providing the path in your CSS is incorrect and should be:
.aa {
cursor: url(../../../images/headphones.cur);
}
回答2:
Thanks so much for the quick response Jarno. I got this taken care of, but I had to add some other things that I hadn't come across before. Here is my .less file now:
.aa {cursor: url(/images/listen.cur), progress !important;}
It took a long time to get anything to work properly, and it wasn't until I added
progress !important
that the cursor changed. I understand !important, but I couldn't find anything on progress !important, although there is no effect without it. Thanks again! Nothing would have worked without your relative path help.
来源：https://stackoverflow.com/questions/20417929/custom-cursor-with-less