Set Style For Not Not Hovered Elements Only

How is it possible to set style for not not 'hovered' elements only? For example: The input

Solution 1:

Unset it in the hovered element:

input {
  background-color: red;
}

input:hover {
  background-color: transparent;
}

transparent is the default value to background-color if nothing is set, so setting it explicitly will force it to the default value.

Solution 2:

I don't totally get what you're asking but this might help

input:not(:hover) {
}

By the way that is a CSS3 selector, so it won't support legacy browsers.

http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/

Solution 3:

Have I understood it correct if you want one default state for every input item (all four of them) when none of them is hovered, and when one item is hovered all of the others get another style?

If so, maybe you could do this with:

input {
  background-color: red; /* this is the default when none is hovered */
}
#containerForInputs:hoverinput {
  background-color: yellow; /* this is the default for all except the one item that is hovered */
}
#containerForInputsinput:hover {
  background-color: blue; /* this is the style for the hovered item */
}

Something like that? (I haven't tried it myself, but I think it should work)

Solution 4:

not sure what you are looking for, but try this out:

input {
  background-color:blue;
}
input:hover {
  background-color:red;
}

http://jsfiddle.net/eMPKD/

Solution 5:

I'm not sure what you mean by "not not hovered". The way you do this is set the the default style and then a separate style for "hover":

input {
    background-color: red;
}

input:hover {
    background-color: grey;
}