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?
Related
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>
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; }
I want to do something like this. I have a link inside a parent and I want to change the background of the parent and the link both whenever I click on the link. Is it possible?
Here is my fiddle http://jsfiddle.net/x5m5m035/
a:active {
background-color: yellow;
}
div{
background-color: red;
}
So when I click on the link, parent's background color should also be yellow.
I am sorry if it is too silly to ask.
Thanks
It's not possible using pure CSS because CSS hasn't parent selector, but you can do that using javascript or JQuery.
Try this JQuery code for instance:
$('a').mousedown(function() {
$(this).parent("div").css("background-color","yellow");
}).mouseup(function() {
$(this).parent("div").css("background-color","red");
});
Check JSFiddle Demo
There's no way to implement if without scripts.
So, whenever I click on my button, this happens:
Is there any way to prevent this?
Thanks guys. :)
Answered already (probably many times, but here's one example): https://stackoverflow.com/a/3397158/839847
Quoted here for convenience:
This border is used to show that the element is focused (i.e. you can
type in the input or press the button with Enter). You can remove it,
though:
textarea:focus, input:focus{
outline: 0;
}
You may want to add some other way for users to know what element has
keyboard focus though for usability.
Chrome will also apply highlighting to other elements such as DIV's
used as modals. To prevent the highlight on those and all other
elements as well, you can do:
*:focus {
outline: 0;
}
Think you keeping your button inside <a> tag. If so use this code
a #btnid
{
border:none;
}
panelMain.setBackground(Color.WHITE);
Button.setBackground(Color.WHITE);
Adding this to your JFrame inherited class constructor will resolve the issue. The color does not have to be white, you can set it anything, just make sure the panel and button are of the same color. and please don't trust my answer too much because I too am a beginner
To make this work for me in Chrome in 2021 I added this to my Site.css file:
.btn,
.btn:focus,
.btn:active,
.btn:hover {
border: 0 !important;
outline: 0 !important;
}
Question for CSS designers.
How do I add anchor behavior to any css class without "<a href.." attribute. Here is what I mean.
I'm going to have this html code:
<span class="my_link">LINK TO SOMETHING </span>
and this text should have link behavior (visited color, active color and underlining, "pointing hand pointer").
Is it possible to make this in css?
span.my_link { text-decoration:underline; cursor:pointer; }
You could make use of :hover if you want to apply hover styles to it. Though I'm really not sure why you can't use an anchor.
The visited and active color will have to be done in Javascript. The pointer and underline can be done like this:
.my_link { cursor: pointer; text-decoration: underline; }
Unless you put it in an tag, you can not get the visited, active, etc colors without javascript. You can however get the pointing hand cursor, and the ability for it to go somewhere when you click on it. To make it have the correct pointer use this:
.my_link{ cursor: pointer; }
and for the clicking, use.
$(".my_link.").click(function(){
location.href="page";
}