Hi I have a div with a link however when you hover over the div the mouseover state doesn't change i.e. the mouse pointer doesn't change to a finger instead of a mouse
Unfortunately I am unable to replicate this error in jsfiddle it only seems t occur on my Wordpress installation
the address where it occurs is here http://stylrs.com/trustees/ (when you hover over individual names.)
Is there a reason for this?
How can I fix this?
Add this to your css:
.su-lightbox{ cursor: pointer }
Those blocks arn't links at all. I see though you have a click event tied to them. Just give the block a cursor:pointer css style and it will look like a link
try changing with css :
.linkclass:hover {
cursor:pointer;
}
and please edit your question and give us your code. So, we can see the real problem.
you can change it manualy like this :
.your div {
cursor:pointer;
}
Related
I'd need to make my area elements appear as pointer cursor to indicate that they are clickable. The flags on the map at the right, 'http://www.metlifecare.co.nz/bay-of-plenty-villages' should appear like they are links.
I'm pretty sure the method I've been using right now to show the <areas> as pointer cursors is working before. Somehow, now its not working anymore.
CSS I've been using:
area:hover, .hover {
cursor: pointer;
display: block;
}
Based on the example, http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap , the area elements are working as a link. However, the flags on the site I'm currently working are not. They should appear the same also.
Am I missing something or any suggestion for alternative to make it work correctly?
Some tips and tricks here. Seems you're not alone, at least! :)
Setting a cursor [with CSS] on an image map area
This problem is resolved after spending couple of hours looking on the web for a fix.
All what I did was remove the cursor:default; applied to the ''. Voila! The cursor:pointer applied to map elements are now working.
So, I have links that are automatically generated.
For a specific page I don't want users to click the link (only see that it is there).
Without modifying the code, I am thinking of putting a div container over it with high z-index so that users cannot click it.
Should I embed a 1 pixel image with background repeat that are positioned exactly on top of the link or is there a better way of achieving this?
Thanks
You can disable pointer events using CSS, actually. For example, if you add a class or can identify the <a> element in some way, you could use this CSS:
a.disabled {
pointer-events: none;
cursor: default;
}
Browse support for pointer-events can be seen here.
Credit to this StackOverflow answer.
Hover over the currency signs (which clicked, change the pricing currency) and a text icon "I" shows instead of the mouse. How do I fix this?
Explanatory screen shot can be found at: here
The page itself is found: here
Posting image as code as not enough rep to post images, if someone could edit that would be appreciated.
Insert this code somewhere in your css files,
#currency-switch > span {cursor:pointer}
Add "cursor:pointer" in css rules:
#currency-switch span {
cursor: pointer;
margin-left: 10px;
}
cursor:pointer in css rules:
#currency-switch span {cursor: pointer;margin-left: 10px;}
See also
You need to change your cursor on hover for specific elements. There are a lot of cursor types for me to paste them all here, so take a look ---> http://www.w3schools.com/cssref/pr_class_cursor.asp
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 a problem in viewing my web app in mozilla.
In my web app I have a button whose css styles are as below:
.page_button
{
BACKGROUND-IMAGE: url(../images/pagebutton_bg2.png);
BORDER-LEFT:0px;
/*WIDTH: 100%;*/
CURSOR: pointer;
/*COLOR: #000000;*/
BORDER-BOTTOM:0px;
}
As above I have commented out the "Width:100%"&"Color:#000000" attributes as they are causing problems in Mozilla Firefox.(The width100% option makes my buttons appear very small) -- so i commented them.
But the problem here is that this button is inheriting the same Color:#000000 & Width:100% from other parent elements.How can I stop this inheritance.
I even tried overriding those properties like : Color : null; Width : none ---> But this is not working.
I appreciate any suggestions to overcome this.
Regards,
Vijay
I don't know if I understand your problem correctly but if you want to prevent accidental inheritance you can try and use full paths...so instead of just .page_button you could use something like body.page_button though it is more probable that you should do that somewhere else in your code and not in the part you are displaying hope that helps...good luck!
width is not an inheritable property, so you must be applying the style width: 100% to your button using another selector.
If you don't already have Firebug, then I recommend installing it and using it. With Firebug, you can select any DOM element and trace back exactly how the values of all CSS properties on the element were calculated.
If the button is on a link element, then width will have no effect unless the link is set to display:block; or display:inline-block; . That could be having an unintended effect.
I also second the Firebug recommendation!