CSS:
button:active {
/* active css */
}
button:disabled {
opacity: 0.5;
}
HTML:
<button disabled="disabled">Ok</button>
When I click the button the browser adds the button:active state making it look like it was clicked (even though it is disabled). I swear I thought :active was only added if the button was enabled. What have I missed?
From what I can tell, :active doesn't exclude :disabled elements. You can read the spec if you'd like.
To solve your problem, you could exclude :disabled elements by targeting only :enabled elements with your :active selector:
button:enabled:active {
/* active css */
}
button:disabled {
opacity: 0.5;
}
Demo: http://jsfiddle.net/Blender/LRvra/1/
According to the CSS3 specification (:disabled is not in CSS2.1) there is no mention that :active and :disabled are mutually exclusive. It's possible that this part of the specification needs clarification so UAs are free to apply the pseudo-classes in combination.
I suggest you modify your selectors to be more explicit:
button:enabled:active {
/* active css */
}
button:disabled {
opacity: 0.5;
}
You could also use the :not()-descriptor of css:
button:active:not(:disabled) {
/* active css */
}
button:disabled {
opacity: 0.5;
}
Wish y'all the best, Patric
Related
I search for all solutions but nothing help me.
my simple problem is to set a style for a link ( a Tag ) with a class:
<a class="logo"></a>
I don't want a general style for links or for active ones but for a selected Class.
Thank you.
I think you're looking for the CSS class selector.
To apply a style to just a single class you should prefix the class name with a dot (.) in your CSS selector.
In this particular case you would do it like this:
.logo {
/* Styles here */
}
You can also ensure that only link elements are affected by adding the element selector:
a.logo {
/* Styles here */
}
PS. The CSS id selector is # and it works in a similar manner.
There are three different ways to solute this. Since you do not want a global styling for a link this example will not be it:
a{
/* STYLE HERE */
}
Since you simply want to style a link with a surtain class use this example:
a.logo {
/* STYLE HERE */
}
or
logo {
/* STYLE HERE */
}
or
a[class="logo"] {
/* STYLE HERE */
}
The last example is a new way of making this happen, some very old browser wont understand this, so you better stick to the first or second example.
Use like this
<style>
a[class="logo"] {
background-color: yellow;
}
</style>
<a class="logo">test</a>
you can add style rules by targeting class :
a.logo { color: #aeaeae; }
I am looking for an opposite of select:focus, something that would style the select from CSS after a selection is made.
concept:
select:when not focused
{
color:transparent;
}
You could use :not pseudo-class and combine it with the :focus one. Something like this should work:
select:not(:focus) {
color: red;
}
Here's a demo: http://jsfiddle.net/b2rnU/1
do u mean on focusout
$("element").focusout(function() { ... });
Editing to what #Pzin said, add a new class with select to get what you want.
Like
select:focus {
background: white;
}
I am trying to create an effect where if a user hovers over an element, the element disappears. I have tried the code below, but it seems that the display:none; breaks the CSS. I am wondering why my CSS does not work, and how I would solve my problem.
http://jsfiddle.net/2c42U/
<div class="foo">text</div>
.foo:hover {
color: red;
display: none;
}
Try changing the element's opacity instead: http://jsfiddle.net/XtmVQ/
.foo:hover {
opacity:0;
}
try this instead of display:none
visibility:hidden
Try this:
.foo:hover {
opacity: 0;
}
What is your final intent for this?
as #Richard said, use opacity
also, to be backwards ie, do as follows:
filter:alpha(opacity=0); /* For IE8 and earlier */
and you can also add a transition:
transition: 0.5s
so that it is not instant.
You can do what the others suggested, use opacity: 0; or visibility:hidden;, but if you must have it hidden from the flow of the page. Then do the following:
Use a CSS like this:
.hidden{
display: none !important;
}
You can use the class hidden and apply it to any element to hide it. For the hover behaviour you want, you'll require JavaScript/jQuery to apply the class name. See http://jsfiddle.net/rkH7F/
i think css will not work. use jquery
UPDATE
ohh, my bad. css will work but the jquery will have a better effect
$('#outer').mouseenter(function() {
$("#outer").hide();
}); $('#outer').mouseleave(function() {
$("#outer").show();
});
FIXED
$('#outer').mouseenter(function() {
$("#outer").slideUp();
}); $('#outer').mouseleave(function() {
$("#outer").slideDown();
});
I have this problem in css where i have two different states in css for example
#koolbutton .active {
color: #fff
}
#koolbutton{
color: #ccc //not active
}
When i try this html
<button id ="koolbutton" class="active">
It gives me the the normal grey koolbutton not the active one which is white! thanks
You need to omit the space between #koolbutton and .active.
#koolbutton { /*not active*/ }
#koolbutton.active { /*active*/ }
The issue is with your first selector:
#koolbutton .active
Since there is a space between the id and class selector, this applies to every element with a class of active and an ancestor with an id of koolbutton. What you want is to select every element with a class of active and an id of koolbutton:
#koolbutton.active
Although the order of your selectors doesn't matter due to CSS Specificity rules, in terms of creating more maintainable CSS I would recommend you put the default styles first, followed by any variations to that style:
#koolbutton { /* default styles */ }
#koolbutton.active { /* .active styles */ }
#koolbutton.foo { /* Another class styles */ }
If you are really wanting to style active/focus states, you should probably look at the :focus and :active pseudo selectors.
You may try this one also;
#koolbutton:active {
color: #fff; //when user click the button
}
#koolbutton{
color: #ccc; //normal display of button
}
Here is the working Live Demo.
I am trying to display sets of images with up and down navigation in form of arrows. I have added
cursor:pointer;
to the arrows on hover to emphasize the clickability. However, when there is no more images in a certain direction, i set the class to disabled.
.disabled
{
cursor:default;
}
However, the hover pseudo class takes precedence here, and changes the cursor to pointer. How can I prevent :hover to set the cursor to pointer when .disabled is set? Is it at all possible?
Add also
.disabled:hover {
cursor: default;
}
Use !important.
.disabled {
cursor:default!important;
}
IE6's !important implementation is buggy, so if you need to support it you might just be better off re-ordering your rules to get the required precedence for the .disabled class.
David Dorward raised an interesting point to note in the comments. Applying a value to cursor in a :hover pseudo-class is completely redundant. The following to rules have exactly the same effect:
.mylink { cursor:pointer; }
.mylink:hover { cursor:pointer; }
Therefore, you should avoid setting cursor in a pseudo class and stick to
.mylink { cursor:hand; }