I want to change simple cursor to image, so i have this code which isnt working
html{
cursor: url(image/cursor.ico), auto;
}
body{
cursor: url(image/cursor.ico), auto;
}
*{
cursor: url(image/cursor.ico), auto;
}
What is wrong here?
Your problem is probably not with your CSS code (although I recommend double checking the link to your image).
MDN says this:
While the specification does not limit the cursor image size, user agents commonly restrict them to avoid potential misuse. For example, on Firefox and Chromium cursor images are restricted to 128x128 pixels by default, but it is recommended to limit the cursor image size to 32x32 pixels.
I had an image that didn't work, changing the size to 32x32 indeed solved the problem!
Related
Am I missing something very obvious here? I'm trying to replace the cursor css property with a png as demonstrated here
I have it working with the demo 'happy.png' but can't understand why its not working with my 'call-me-hand.png'
.next {
cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
cursor: url("https://robcleaton.github.io/warface/assets/images/call-me-hand.png"), auto;
}
CodePen
The cursor property has limits on the url value based on Browsers and OS. For example, Images larger than 128 x 128 Pixels aren't supported on Firefox. To make it work, reduce the dimensions of the given image.
Further information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
I tried your pen using this link and... it worked! Not sure why it doesn't with yours though...
I have this div :
<div id="trees"></div>
Formatted with this css:
#trees {
width: 100%;
position: absolute;
top: 37%;
height: 40%;
background: url("/img/Tree.png") repeat-x;
background-size: auto 100%;
}
It works fine in all the browsers I tested, with this result:
Except in IE/Edge, where it looks like this:
Trees with color glitches:
The weirdest part is that this issue does not affect any other divs with similarly configured background images like the train tracks or the mountains... I have search a lot on this and couldn't seem to find an answer anywhere. I also tried to convert the image from png to gif and I got the same result. How would I fix this for IE/Edge compatibility?
Here is a codepen reproducing the problem in Edge: https://codepen.io/darthmooguy/pen/gmNWwg
I was having the same issue as you, and whilst this doesn't resolve the cause of the issue, I've found that adding transparent padding to the edges of your image and increasing the background size is a usable workaround in many cases.
https://codepen.io/anon/pen/BRwxbR
Adding the following scaled my background, so set it to an appropriate level.
background-size: auto 250%;
background-position: center center;
Please ignore the colour change - I was also wondering if a specific colour triggered it based on your initial problem, but it did not.
I might look at this further as my workaround here does not actually solve my issue. :)
here is the tree image (png) saved from Irfanview (save with transparency, no compression)...I'm not sure if Irfanview has stripped the Adobe meta data though.
as you can see... the colors and transparency color is completely different from the adobe authored source.
I am using the css custom cursor to use an image for the cursor. The image doesn't work. What is wrong with this code?
Here is the image used. Fiddle
cursor: url('http://www.sarkelliancreed.comule.com/pics/TREES.jpg'), auto;
I was dealing with this problem last night. The issue is that there is a limit to the size of the image you can use as a cursor. If you really need an image that large to follow the cursor, have a div with that image snap to the cursor position on the mousemove event.
MDN at least describes the size limit for Firefox:
In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.
MDN documentation for cursor property in CSS
Put in a 32x32 png rather than the image you're using as the URL and run the Fiddle again, and it works. Example image: https://upload.wikimedia.org/wikipedia/commons/1/1d/Smile_icon_32x32.png
Any type of file format won't work, only .cur files.
cursor: url('http://www.sarkelliancreed.comule.com/pics/TREES.cur'), auto;
source: https://fb.watch/dRdLF-vwD2/
Example website
So when you mouseover the projects you should see an rgba background fade in with some text over the existing image. I cannot duplicate the error in Safari or in Firefox. In fact, I cannot duplicate this for the same ones every time, and I can also say that refreshing the page will not necessarily fix the problem either.
Is this a problem in my code or have we come upon a problem with Webkit and/or Chrome specifically?
UPDATE 1
Originally I thought this was a problem with the RGBA background so I tried using a background: black; to see if it changed anything. This didn't work seeing as the line was still present on mouseover.
UPDATE 2
I have considered this to be a problem due to the display I've been using. I'm on the new Macbook Pro with retina display. This could still be the source of the issue, but I'm not convinced it is. I'm yet to do testing myself on another device that isn't a retina display, but I've been told that the lines are still prevalent.
This image will help:
There's something about your box-model that I don't like for this technique. I've used similar hover/fade scripts, but never utilized a negative margin (because it will jack up the box-model), or made the top layer larger than the bottom.
I found a few things that helped it render better for me (I'm wasn't seeing lines, but I was seeing either rounded white corners peaking out or black chisel points in the parent corners). At any rate, here's the few things:
Nix the -1% 0 0 -1% margin (making something 102% wide, then using a -1% margin seems like 100% to me, but relies on all browsers rendering that math the same).
Set the parent and child to be the same W x H (200px x 410px)
Decreasing the radius of the child by one px hid the oddities of the corners for me (again, I think it's a rendering engine thing FWIW); though not having it set should do the job.
I also add .projectItem a:hover to the .projectItem a's CSS declaration, to allow just the transitions to occur on .projectItem a:hover.
This fiddle does the roll-over effect with all the features above added/removed respectively: http://jsfiddle.net/hd4QM/
HTH.
I can't reproduce le problem in Chrome, but from your screenshot it looks like you are zoomed in. Sometimes browsers round off percentages and you might be ending up with a missing pixel, it's best to make it stick to each edge instead of specifying height and width:
.projectItem {
overflow: hidden;
}
.projectItem a {
display: block;
position: absolute;
opacity: 0;
width: 102%;
height: 102%;
background: black;
color: #F6F8EE;
background: rgba(0, 0, 0, 0.85);
border-radius: 5px;
margin: -1% 0 0 -1%;
}
Also, I'm not sure why you're displaying as table, but this might be compounding the problem. Change it to block.
I am trying to create a custom cursor using the following image:
http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png
The image size must be retained. I've tried simply to use body { cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'); }, though that doesn't work in FF/Chrome. (not even checking other browsers)
What's the reason for it not working?
The problem is not just with your css code lacking second argument but with the image file.
If you simply resize, make it smaller (i tried 32px for testing purposes) it works like a charm.
You might also want "pointer" rather than auto, judging by the look of the image;
cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), pointer;
EDIT:
i realize now you wanted to keep the size but it just won't work. see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property for more info
Firefox requires a second non-url argument such as
cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), auto;
There is a great reference at Quirksmode CSS2 - Cursor Styles
The reason this is not working is maybe that you're doing this:
cursor:url(https://example.com/example.png)
You have to add , auto after the statement. Therefore, this is what you are looking for.
cursor:url(https://example.com/example.png),auto;
Here's the clippet.
button {cursor:url("data:image/x-icon;base64,AAACAAEAICAAAAAAAACoCAAAFgAAACgAAAAgAAAAQAAAAAEACAAAAAAAAAQAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAP8IAP8RAAAA/+YABP8AAAD/iAAAav8AAP+3AACi/wALCxIAAHP/APL/AAAA6v8AALv/AACV/wDQ/wAAAP8RAAD/9wAAe/8AACb/AABV/wAAAP8A/8gAAP/3AAAA+/8AAP8aAF7/AAAA/1EA/wCzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABUcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAFQAAAA4AAAAAAAAVABgAAAAAAAAAAAAAAAAAAAAAAAAGEQAADAAJAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAABEEAAAZAAkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAsACQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVAAAcCQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMAAAkAAAAJCQkJAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAACQAACQAAAAAAAAAcAAAAAAAAAAAAAAAAAAAAAAAKAAAACQkcAgsZDA4VABUAAAAAAAAAAAAAAAAAAAAAAA0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBRsBGg8WAAAEEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBEGFQAAAAAAAAAAAAAAAAAAAAAVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxAXAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////////////////////////////////////////////////8/////H////w////cPH//zDg//8Q5P//AOD//wDx//8A////AP///wH///8DgH//AwA//wAAH/4AAB/+AAf//AAD//wAAf/4AAD/+Af///Af///wf///8f////"),auto;}
<button>Hover over me!</button>
Is this what you looked for?