I'd like to show the :active CSS effect on mobile devices before the user lifts their finger. Currently using :active and it shows its effect after the finger was lifted. One of the few sites I found that has the effect I like are Amazon's buttons.
a:hover:active {
background-color: yellow;
}
link
This seemed to do the trick for me! Apparently the active has to be after the hover based on how CSS evaluates its code.
If you are using Javascript use the onmousedown event.
function mouseDown() {
document.getElementById("myA").style.color = "red";
}
<a id="myA" onmousedown="mouseDown()"> Link
</a>
Related
I want to change the color of a link when a user focuses on it by navigation to it using the TAB key.
that's the easy part, as it's done by this:
a:focus{ color: red; }
the problem is, the link is also colored red when activated, e.g: when a user clicks the "ENTER" key or the left mouse click.
How can I prevent this side effect and keep the coloring only when user focuses on the link using the "TAB" key ?
I tried this:
a:focus{ color: red; }
a:active{ color: blue; }
(blue is the default color)
it didn't work, what happens is it first turned the link blue but then red in a slit second...
I need this done of every link on my site so I don't want to use any complicated javascript code to do this and hoping to do this in CSS only.
any suggestions ?
edit: I also tried this:
a:active:focus{ color: blue; }
in order to capture a state in which the element is focused AND active so I can override a "focus" CSS.
it didn't work either.
The problem is the order of the rules.
a:link
a:visited
a:hover
a:active
a:focus
Focus has to be the last.
I tried and it works well.
Try using :visited pseudo class
a:visited{color:blue;}
I don't think you can do this in css only.
When you click a link, you give it focus.
You could try a little jquery routine to give all of your links a click handler which immediately blurs the focus away?
$(function () {
$('a').on('click', function() {
this.blur();
});
})
jsfiddle: https://jsfiddle.net/6sujjuvn/
In the fiddle, you can see that after it spawns the new tab/window, your clicked link back on the jsfiddle page no longer has focus
Have you tried:
a:active{ color: default; }
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;
}
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");
It's just a simple question. I made a button using <a> with background image. It should use different image when it is clicked. I use :active property in its css. But the thing is even after the button is not pressed (release), the :active class is still there. So it is still using the image for the status.
How come? And how I should do it, when I only want to apply the class when the button is pressed?
Thank you. I hope I have explained it well enough.
catwoman, if you just want it while pressed active should work. if you're looking for toggle, then you need what's below.
CSS doesn't have a selector that toggles, except for :checked on checked inputs.
You need Javascript:
<a href="#" onclick="toggle_class('foo');"
or to use jQuery Toggle: http://api.jquery.com/toggle/
--
then again, if you are actually looking for button pressed, active should work. paste your code here and we can check it out. if you're doing something that can't be performed solely with css :active pseudoclass, look at the mousedown event: http://api.jquery.com/mousedown/
works fine for me: Demo
button {
background-color: blue;
border: none;
color: #FFF;
}
button:hover {
background-color: green
}
button:active {
background-color: red
}
Can you provide a Demo to have a look in to it?
I have a problem where if the previous page browser button is used, the current page button state for the page that was previously viewed remains. This results in that multiple menu items appear in their 'current' state when the previous page browser button is used. If the 'current' state of the previously viewed page is rolled over, it reverts to it's normal state. Doesn't make sense? Click here to view the site. I've never had this issue before, and tired everything! Any advice appreciated!
Your issue here is that when you leave the page and then go back, your original image (which was hovered when you left) isn't getting swapped back to its non-hover state until the mouseout event occurs.
My suggestion would be to use background-image instead of imgs, and then you can change it on hover easily using the CSS :hover selector, something like:
<a id = "groove" href = "/groove/">
</a>
CSS:
#groove {
background-image: url('groove.gif');
height: 20px; /*just an example*/
width: 100px; /*another example*/
}
#groove:hover {
background-image: url('groovehover.gif');
}
I hope that helped!
Seeing as there is no Javascript associated with this, it seems like a simple issue of caching.
In any affected browser, try clearing your cache and then refreshing the page.