My aim:
To change the default click pointer on a website using CSS.
I have already changed the default pointer but this question is specifically for changing different 'versions' of the cursor.
My current attempt for the pointer is:
cursor: url(images/click.png), pointer;
This worked for the default mouse change (pointer was renamed as auto) but I've yet to find a working solution for the pointer.
Is it plausible or is it simply something not needed and thus, not introduced?
Just set cursor style.
a {
cursor: url("/examples/images/custom.gif"), url("/examples/images/custom.cur"), default;
}
You can read about the css hover property. and add the cursor to it. For example putting the following code in your styles would make the cursor alias whenever you'd hover over the anchor tag. Let me know if this helps you.
a:hover {
cursor: alias
}
Related
I have a really big project where I need to change all the cursor: pointer to a custom pointer
Here's how the normal pointer looks:
One way to do it is to create a class like the following in CSS and apply it to every element in html where the custom pointer is supposed to appear:
.custom-pointer {
cursor: url("../img/custom-pointer-cursor.png"), auto;
}
The problem though is that that pointer is supposed to appear in a 100+ places in the project and I was wondering if there is a way to just override cursor: pointer with my custom pointer with only a couple of lines of code in css.
I have looked on the web but have not found anything similar to what I want to do.
Basically we use pointer on anchors and buttons, if there is something else where you need custom cursor, I think you can use following code:
a,button{
cursor: url("../img/custom-pointer-cursor.png"), auto;
}
TL;DR: I want a cursor pointer on green cells and cursor disabled on grey cells
I am building an application which use Fullcalendar and I face a problem I can’t solve:
I try to modify the cursor directly on cells (not events)
I tried to target the « .fc-future », « .fc-today » and « .fc-past » fullcalendar classes and apply a style like « cursor: pointer » or « cursor: not-allowed » without any success.
Here is a screenshot of what I have:
Does anyone know how can I change the cursor on columns ?
Thanks for your help !
My project:
Fullcalendar 2.8.0
Thanks for your quick reply !
I couldn't figure out how to set this up as you explained in your post.
So I found a workaround.
In Fullcalendar, I added a background event object:
{
start: moment().startOf('isoWeek'), # beginning of week
end: moment().utc().endOf('day'), # end of current day
rendering: 'background',
className: 'disabled-cell'
}
This "fake event" disable all day from beginning of week until the end of the current day.
For the cursor, I created a css class:
// Sass code
.disabled-cell
background-color: gray
opacity: 1
&:hover
cursor: not-allowed
.fc-view
td
cursor: pointer
<div class="fc-scroller-canvas"> contains two divs, one with the fc-content class and another with fc-bg class. You are setting background for the elements inside the fc-bg. Set the cursor CSS property for the same elements inside the fc-bg.
Then, in order to show the cursor through the fc-content, you need to set pointer-events: none; for the fc-content div. This will kind of make it transparent for the mouse pointer, so that you can mouseover or click the elements in the underlying div. That means you will be able to see the cursor you need.
Obviously this may disable some of the functionality that you may need, so you need to set back pointer-events: auto; on things that you need, such as on events themselves (if you do anything with eventClick, for example).
I'm having a problem with my stylesheet on a QPushButton:
QPushButton#convertButton
{
color: #00FF00;
}
Pretty simple as you can see and the text colour gets set correctly. The problem arises when i click the button, a strange artefact appears like an inner part of the button has been selected. Unfortunately i don't have enough rep to post an image.
If i remove the stylesheet the artefact does not appear on press.
Any help welcome. Thanks!
I found a solution:
QPushButton:focus
{
outline: none;
}
This removes the artefact, but unfortunately the 'shading' style of a focused widget is now also lost. If someone knows how to retain this please let me know (i couldn't find the default stylesheet online).
Maybe you can try to edit the substate "pressed" of your button thanks to :
QPushButton:pressed
{
color: #00FF00;
}
I tried you example on my computer but I can't see the artefact you speek about. But maybe it is because I have not the same default style than you.
I have a simple page in which I'm trying to style an a link. I can style the normal state fine, but the hover state never triggers.
The relevant portion of my stylesheet is:
a.faqquestion {
color: orange;
}
a.faqquestion:hover {
text-decoration: underline;
cursor: hand;
}
and my code looks like this:
<a onClick="toggleMe('FAQ1')" class="faqquestion">1. How many licenses do I need?</a>
Can someone see what I'm doing wrong? The full page is available at:
http://www.haast.ca/Pages/Products/HAAST/FAQ.htm
and FAQ's 1 and 2 are styled with the class "faqquestion".
Thanks,
Michelle
A few things:
cursor should be pointer not hand
add the faqquestion class to your links
your links should have a target so just add a href="/wherever they should go" or href="#"
Internet Explorer is ignoring the a.faqquestion:hover production because your cursor definition is invalid.
Changing cursor: hand; to cursor: pointer; fixes the problem.
The page works fine on my browser, you just forgot to add the class faqquestion to the other links
It works:
http://jsfiddle.net/Steve_Wellens/tjW6Q/
So, I'm guessing your CSS is in a separate file that's not being loaded.
IT is your just not noticing it because you have nothing changed in the second css, because the HTML tahe < a Come with underline. and try spacing out the different css variable's, like
a .faqquestion:hove, and it will probably work if you remove the a, because your calling the same tag with two different css tags cause you call the < a with faqquestion
Im trying to override the grey text of a disabled input and textarea. At the moment Im only really concerned with it working in Webkit and Mozilla. At the moment Im currently using every trick in the book that I know of:
input[#disabled=true], input[#disabled],
button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled],input[disabled="disabled"], input[disabled] {
color: black !important;
}
Sure it does change the colour if I change it to something else, however when I choose black it is still greyed out a bit.
Any ideas? I am using Ext JS if I can use that to manipulate it. Thanks.
input.button-control[disabled]
{
color: #cccccc !important;
}
Here button-control is a class on the input element, whose text is overriden to grey when the disabled attribute is set.
I hope this helps.
I would prefer to go the JavaScript way to achieve best browser compatibility. I would use the ExtJS [http://www.extjs.com/deploy/ext-1.1.1/docs/output/Ext.DomQuery.html][DomQuery] and insert the CSS rules by adding specific class or directly injecting them as style attribute values.