I have not customized my site mouse cursor in anyway, so it is all as default. As such, all text when hovered have the cursor change into the "text select cursor" (this guy > ꕯ). Fine. I then styled my first letters (just changed color), and now they (the first letters) have the default arrow cursor when hovered. I then tried manually setting a cursor but the css rule is seemingly being ignored...
I styled the letters with this simple css rule:
::first-letter{
color: red;
}
I then tried setting a new cursor rule to it, and it did not work, even when setting it to none the arrow cursor still appear on it.
::first-letter{
cursor: none;
color: red;
}
This is not about selecting text, or the blinking cursor from input text fields. It is simple the mouse cursor visually changing when above text.
As MDN says:
Only a small subset of CSS properties can be used with the ::first-letter pseudo-element
cursor is not one of them.
Related
I'm using CSS to ease-in-out some text when a particular psudeo:element is hovered.
The code below is selecting the parent of the .description element I want to show on hover, however the hover effect is happening before I want it to.
.grid-item:hover .description {
visibility: visible;
opacity: 1;
}
When the cursor is a few centimetres above the parent element, the hover state is triggered. I believe this may be a problem with the padding/margins of this element. I've tried many things with no luck.
Here is the full code.
Gently hover a little bit over each image to understand the problem.
You just need to change the CSS selector that shows the text on hover. At the moment, it is triggered when the parent of .image (i.e. .grid-item) is hovered. Instead, if you set it as follows, it will be triggered when the div containing the image is hovered.
.image:hover + .description {
visibility: visible;
opacity: 1;
}
Here's the updated pen: https://codepen.io/anon/pen/WEWmEw?editors=1100
#Jordan Miguel, you're right. It's the padding, as well as the content itself.
If you crack open the dev tools for the browser of you choice (I'm using Chrome's in the picture), you can probably find a tool that will show the box model for a particular CSS element. When selecting your element, you can see the padding on the right and left side that trigger hover.
On the left hand pane of the tools, you can see the element selected as well as the stylings that have been applied. From here you can figure out what you'll need to change in order to get the behavior you expect.
I did not find the answer in SO.
Do we need to explicitly add cursor: pointer; to have gloved hand mouse?
when it will automatically add gloved hand mouse to an element while we hover over the element? I mean what kinds of elements we hover will have gloved hand mouse.
I also want to know why it will add gloved hand mouse to an element while we hover over the element?
How can we disable gloved hand mouse which is supposed to be becoming gloved hand mouse when we hover an element (Just for a specified element)? And any solution to disable all gloved hand mouse
In short:
<a> tags are generally the only element that have cursor: pointer; by default.
Applying cursor: pointer; to other elements will give them the "hand" cursor.
Similarly, applying pointer: default; will apply the standard "arrow" cursor.
Breakdown by question:
Do we need to explicitly add cursor: pointer; to have gloved hand mouse?
If the element does not have it as the default cursor, then yes.
when it will automatically add gloved hand mouse to an element while we hover over the element? I mean what kinds of elements we hover will have gloved hand mouse.
It differs from browser-to-browser, but for the most part, <a> tags (with an href attribute) are the only that have cursor: pointer; as the default cursor. Per the W3 specification on cursors:
links and status cursors
The cursor is a pointer that indicates a link.
I also want to know why it will add gloved hand mouse to an element while we hover over the element?
This question seems the same as the previous. If the element is a link, or has cursor: pointer; applied, then it will have the "gloved hand mouse" cursor.
How can we disable gloved hand mouse which is supposed to be becoming gloved hand mouse when we hover an element (Just for a specified element)? And any solution to disable all gloved hand mouse
Simply tell the element to use cursor: default; instead.
a {
cursor: default;
}
No pointer.
If it doesn't have it, then yes (exceptions below).
Links (< a >...) will get cursor: pointer automatically.
It adds because it's the default value. "pointer:
The cursor is a pointer that indicates a link." from w3.org
Set cursor: default for the specified item or anything else you want. You can find cursor options on the link above. You can disable it on all links with a{ cursor: default; }.
I have this problem in Safari and Chrome but not in IE.
When I click a button the mousedown event triggers some kind of CSS rule which makes it slightly wider.
Because of this it drops down onto the next row and the click event is not triggered.
It stays on the next row until the mouse button is released.
I'm working on a large existing site and it's difficult to isolate all the CSS, but I think this could be due to an effect inherent in the browser(s).
Is there a CSS way to stop any effects occuring when the button is clicked?
Thanks for your help.
This is the CSS I have found for :active / :hover.
I don't think this could cause it!
a:hover, a:active
{
text-decoration: none;
}
(The button is an image inside an anchor)
Open your page with Chrome. Right click on the element and select inspect element. On the right handside corner of the inspect element handler, you will see few icons.
Click on the middle one(Which is having a arrow. When you hover it a label will display as "Toggle element State").
Change the element state to active (and to focus if it didn't change anything), and now you will be able to see what css rules are used to apply those changes to your button(It can be a padding or width).
Since now you know what the rule is, you can undo it using another rule (Or using javascript). It's hard to say how to remove the effects without knowing what the effects are.
you can declare a class in css name it for exemple abortmousedowncss :
.abortmousedowncss{
width:yourwidth; !important /* this dont allow any css to overide it ;)*/
}
and you can apply it after with jquery like this :
$('#yourbutton').addClass("abortmousedowncss");
I have an HTML table and I put a double click on the rows. The table is read only except for some <input> fields.
How can I make it so that the cursor does not change to an I bar when I hover over the text that's not an <input> field?
I received some answers but they just point to links. Can someone give me an example in a fiddle ?
You can use a CSS property called cursor to specify what your cursor will turn into when you scroll over the text. You can see some of the examples here.
And here is a default cursor on a table example. FIDDLE.
set cursor property for the field you want to be some thing like pointer,waiting etc
http://www.w3schools.com/cssref/pr_class_cursor.asp
.your-block {
cursor: default;
}
use this css:
table.className td input{
cursor: none; /* or the one which you would like to have */
}
I want to disable a decoration in any hyper link means when we hover a link then we get a hand symbol instead of mouse cursor. I want to disable it .Whenever i hover mouse on a link it should just show mouse cursor but not hand symbol.
You can use the CSS cursor property to get this.
Use default to get a pointer like when not hovering over any text
Use text to get a text-selection cursor like when hovering over non-link text
a {
cursor: default;
}
Example: http://jsfiddle.net/Nc5CS/
a
{
cursor:default;
}
Arrow is default symbol for hover on link.So use cursor:default if cursor is other than arrow or hand.
Use this css:
a {
cursor: default;
}