I want to make a button that displays a background color when hovering and a button color without a background color when the button is down. Here is my current code:
.windowButton:hover {
background-color:#1a82b8;
}
.windowButton:active #windowClose polygon {
fill:#1a82b8;
}
The problem with the above code is that it turns the icon a color when :active but doesn't remove the background color set by :hover. How do I remove the background color?
You have to set a new background color on :hover state
.windowButton:hover {
background-color:#1a82b8;
}
.windowButton:active {
fill:#1a82b8;
background-color:#000000;/*You can put the color you want*/
}
Pseudo states inherit values. For consistency purposes, it is best to only declare the styles which you are changing in your pseudo state rules.
Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!
How about this?
I would guess, its cause on the first property you are using background-color and the second fill.
button:hover {
background-color: red;
}
button:active {
background-color: blue;
}
jsFiddle working example (1)
In order for the active state to be applied while the user is also hovering over the button, it's necessary for the :hover selector to come before the :active selector in the code.
From https://developer.mozilla.org/en-US/docs/Web/CSS/:active:
Styles defined by the :active pseudo-class will be overridden by any
subsequent link-related pseudo-class (:link, :hover, or :visited) that
has at least equal specificity. To style links appropriately, put the
:active rule after all other link-related rules, as defined by the
LVHA-order: :link — :visited — :hover — :active.
While the accepted answer did mention that it's necessary to have :active come after :link and :visited, it doesn't say that it must also come after :hover (since in the example given in the question this was already the case). However this wasn't immediately clear to me, so I wanted to post this answer for anyone else who was stuck like I was because the :hover selector was coming after :active.
Also, I think the LVHA-order is a handy rule to keep in mind and relevant to this question.
`button:hover{background-color: transparent;color: yellow;}
button:active {background: white;color: black;}`
Related
In my app, submit buttons and links look identical.
The way I have structured my css is like this:
.button, input[type=submit]{
//default colour
background:grey;
}
.button-primary{
background:green;
}
.button-danger{
background:red;
}
If I wanted a red background on a submit button, I was hoping I would be able to simply add the .button-danger class to it. But unfortunately this does nothing and the submit remains grey, because input[type=submit] is more specific than .button-danger.
What is an elegant way to get around this?
Change your CSS to:
.button, input[type=submit]:not([class^=button-]){
background:grey;
}
What this does is add the :not selector to only style input buttons with the default style, if they dont have subsequent button classes added to them, classes which start with button-
More on :not
The negation CSS pseudo-class, :not(X), is a functional notation
taking a simple selector X as an argument. It matches an element that
is not represented by the argument. X must not contain another
negation selector, or any pseudo-elements.
The specificity of the :not pseudo-class is the specificity of its
argument. The :not pseudo-class does not add to the selector
specificity, unlike other pseudo-classes.
Add something to the selector to make it more specific. For example:
.button-danger, input[type=submit].button-danger {
background:red;
}
Use of "!important keyword" is always possible. something like this:
.button-danger{
background:red !important;
}
I have two links in my header from the class "menu_top", hence:
<a class="menu_top" href="adverteerders.html" >adverteerders</a>
<a class="menu_top" href="ondernemers.html" >ondernemers</a>
The corresponding css code is:
.menu_top {
font-size: 14px;
}
.menu_top:link {color: #404040;}
.menu_top:hover {color: #CC0033;}
.menu_top:visited {color: #404040;}
When I execute this code and hover my mouse on 'adverteerders' then the colour does not change. When I hover my mouse on 'ondernemers' then strangely it does change. So what I did was COPIED the exact code of ondernemers and then it seemed to work again. Now when I rewrite 'ondernemers' to 'adverteerders' then the doesn't work again. However when I type oadverteerders.html then the hover works.
What the hell is going on here?
The order of your CSS selectors matters. When an element matches multiple CSS selectors with the same specificity, the selector defined later overrides the earlier one(s).
So if you use the :visited pseudo-class after the :hover pseudo-class, then the :visited styles will take precedent over the :hover styles, overriding them where they conflict.
That's why you typically want to define your :hover and :active styles after :visited.
I was digging some css codes written by someone and I found this:
li.hover, li:hover {
}
Is there any difference between .hover and :hover?
Maybe some browsers act differently for hover?!
:hover is a psuedo-class while .hover is a selector for the class hover. These symbols (: and .) don't change meaning from any other CSS selector construct: see the W3C CSS Level 3 Recommendation for all the details.
Presumably there is some JavaScript to toggle the hover class, perhaps because of lack of :hover support for LI elements in a "legacy" browser. I know that IE5/6 (ick!) only supported :hover for links, however:
"Modern" GUI browsers correctly support :hover.
(And, as always, make sure the page is not in "quirksmode" :-)
Happy coding.
.hover is just a class name (possibly used to mean "something I [the coder] want to look the same as a hovered item", whereas :hover is the psuedo-class for when the mouse is over it. (Personally I use .hl instead of .hover for something like that)
.hover is a normal class name like any other class name, it has no special meaning.
:hover is the hover pseudo-class which you cannot create yourself, which is only applied when the user hovers over an element with the mouse.
Yes: one's a class (that's .hover) and the other's a pseudo-class (:hover). The pseudo-class will be matched when the mouse is over the element, and the class will be matched when the element has that class.
Presumably, the class is added by JavaScript. This could be for compatibility (some version of IE, I believe IE6 or IE7, only supports :hover on <a> elements) or it could be for extra features (sticky highlighting, for example).
Say you, or I, have coded an HTML element...
<a id='hydrogen' href='#'>H</a>
...and some :hover CSS...
#hydrogen:hover {
background:red;
}
...and now we want to put a fancy hand cursor when hovering. There's two options for this:
apply to stateless element:
#hydrogen {
cursor:pointer;
}
or, apply to :hover state.
#hydrogen:hover {
color:red;
cursor:pointer;
}
My question: is there any reason(s) why one way is decisively better than the other?
...or is it tomato, tomato?
Compatibility: IE6 and below only recognize the :hover pseudo class on a elements.
They are both the same, provided you always want the pointer there, reguardless of hovering.
The :hover pseudo class will inherit cursor: pointer from its non hovered state.
I would prefer to put it on the normal selector, rather than :hover.
Both ways are equally good. However i would put it on the id itself as :hover does not work on ie6 or below if element is not an anchor. If you do not care about older versions of IE. Then both ways are correct.
Is there anyway to combine two selectors? such as:
#div:hover:not(.class)
Edit:
I understand this work as I wrote. However, how can I achieve a "hover" effect for a "LI" element , but exclude the hover effect when the mouse is over a certain "DIV' inside the LI?
E.G.
<li>Hello <div id="#no-hover">Bye</div> </li>
I would like to get a hover effect for the li:
li:hover{ text-color:#CCC; }
but somehow exclude the hover effect when the mouse is over the #no-hover div.
Any ideas?
Based on your question edit, to maximize browser compatibility (I mean, why not if you can?) you can get away with not using CSS3 selectors at all. Try this, assuming black is the default text color:
li, li:hover div#no-hover {
color: #000;
}
li:hover {
color: #ccc;
}
Although you may want to use a class instead of an ID if you want to affect multiple elements with a no-hover classification. In which case you would do this instead for your first rule:
li, li:hover div.no-hover {
Either way, since selecting a descendant with its ancestor is more specific than selecting just the ancestor, assuming the same combinators on the ancestor it'll override the second rule even though that one comes later.
Update:
If you only want to have the hover effect not applying to Bye, then you can just create an extra hover rule for that and set the color explicitly (as other answers showed).
If the hover effect should not apply to the whole li element, then I think there is no way to do it. You needed some kind of parent selector, which does not exist in CSS.
Yes and it is fairly easy to try: http://jsfiddle.net/5vaUW/
(probably only works if your browser supports CSS3)
You might want to read more about CSS3 selectors, where you can find this:
A selector is a chain of one or more sequences of simple selectors separated by combinators. One pseudo-element may be appended to the last sequence of simple selectors in a selector.
A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
In css2, would be:
li:hover{
color:#CCC;
}
li:hover div{
color: #000;
}
For CSS3, I agree with Felix Kling.