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?
Related
Recently I am visiting a website,
but that website makes not visible a section by blurring it (and wants me to pay to see what there is)
I want that I can read through the blurred part of that website.
I read on the internet that there is some code that can solve this. (maybe with javascript or css)
if someone can help, thanks.
like he said #Dai, is better to pay if you really want that content. this is my suggestion, but I will help you the same
one line answer
just add a * selector with this css code filter: blur(0) !important;
so it will become like this:
* {
filter: blur(0) !important;
}
why does it work?
most of the websites for adding the blurring effect, they use the filter CSS property
if the code I show to you before,
don't work, then try using also backdrop-filter CSS property.
the logic is the same: backdrop-filter: blur(0) !important;
* {
filter: blur(0) !important;
backdrop-filter: blur(0) !important;
}
thank #Dai for the suggestion here!
how to use this code?
open devtools on the page.
CTRL + SHIFT + I
click "+" icon
change the selector to *
add the line of code of before.
how it works?
so we basically reset that blur
to all HTML elements using * selector.
so we don't worry about where there is the
element blurred.
by this, I mean that there are websites that make it difficult to find the element blurred: (for example "news websites", etc...)
by adding multiple filters
or nesting the blurred element
or adding the blur effect inline so normal CSS can't override it.
etc...
use also !important that make the resetting of the filter also in inline style="" attribute
it can't do results all the time
remember: there are also some websites that blur the content, but there isn't any real valuable content behind it (for example "LinkedIn" they do that, etc...)
in this example, you can see there is the same component with the same text, and there isn't any valuable content for you (try maybe in that website it will work)
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 a WordPress site that I recently moved from one domain to another (using my host's dotnetpanel). When it went live on the new domain, it does not show up correctly in Internet Explorer. Previously, it worked well in all browsers. Specifically, it seems like parts of the stylesheet are just being ignored. It works fine on all browsers tested except IE.
Try putting the code here in and testing to see if it fixes your problem. What parts look like they're being ignored?
Maybe you have to reinstall some of your plug-ins?
I guess there are some wrong paths in the database or config-files.
Try to search database by db-admin-tool and all the files with an advanced text-editor with the option to search automatically in all files at the same time.
As far as I can see the style sheets are applied.
You have width: 100% and height: 100% on the links in the menu, which messes with their size in IE. Remove those styles.
The reason that the gradients doesn't show up is because they are filters, and the elements has to have layout for the filters to apply.
The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.
Ref: http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx
If you give the elements layout, the gradients will show up, for example:
.block h2 { width: 100%; }
I understand that elements can have multiple classes:
.rfrsh-btn {
background-image:url(../../upload/rfrsh_nb_grey.png);
...
}
.submit
{
font-size: 0.85em;
padding: 0;
}
This was working perfectly as an ID before. now I changed it to a class and lo and behold, no images.
But for some reason this <button> element doesn't seem to want to display with a background image and styles applied.
Is there a reason for this? Or am I codeblind and doing something wrong.
I can't use ID either as it's repeated many times on the page.
Thanks all :)
There are several reasons. For instance, it's quite possible your image path is not correct. It 's worth noting that paths in CSS are relative to the .css file 's location, and not to the including page.
To better understand what's going on now and in the future, however, I recommend either working with Chrome, which offers a nice set of debugging tools, or use Firefox with Firebug installed. This way you can inspect your elements and see what styles get applied, overlapped, or any images the browser cannot locate.
For more information: http://www.thetruetribe.com/2008/03/firebug-tutorial-getting-started/
Underscores in class names can cause issues. Try renaming rfrsh_btn.
https://developer.mozilla.org/en/Underscores_in_class_and_ID_Names
I have the below code:
<button onmousemove="this.style.border='2px #555555 solid';"
onmouseout="this.style.border='';">Test</button>
On mousemove, it correctly changes the border as specified. On mouseout my intention is to change the border back to the original. This works in Gecko based browsers but not in IE. IE removes all the borders and the button becomes 2D.
How do I get back the original 3D look of the button?
Note: For debugging, I tried alert(this.style.border) the get the value of the original border. It shows it blank. So the original border value seems to be blank. But setting to blank does not bring the original look back. :(
Try setting and clearing a class for the element and assigning the border value to the class. Just like below:
.buttonHover
{
border: 2px #555555 solid
}
<button onmousemove="this.className='buttonHover';" onmouseout="this.className='';">Test</button>
Note that this simple JS code will break your existing classes assigned to the element if there are any. If you are to use additional classes, please add a comment declaring the situation and I'll change the code accordingly.
As far as I know, there is no way to restore the original OS look once the element's border is set, although it strikes me as odd that even emptying border doesn't do the job. Ah well. The OS style is not just a classic border, but includes a black outline (depending on OS visual settings, even more than that).
Seeing as IE < 8 doesn't understand outline, I think the best workaround would be putting an element around the button, and highlighting that on hover.
Would recommend using CSS for the same rather than javascript. You can do the following.
Define only the hover propery of the button.
HTML :
<button value="Hello">Hello</button>
CSS :
button:hover
{
border:1px solid #333;
}
I think that what you are looking for can be found in the bowers user agent CSS. Here is a table that will give you a good idea of whats going on with different browsers http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm .