Set style for not not hovered elements only

问题:

How is it possible to set style for not not "hovered" elements only?

For example:

<input id="1"/>
<input id="2"/>
<input id="3"/>
<input id="4"/>

The input 3 is hovered. And I want it to have the default value.

input {
  background-color:red;
}

回答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.

回答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/

回答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:hover input {
  background-color: yellow; /* this is the default for all except the one item that is hovered */
}
#containerForInputs input: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)

回答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/

回答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;
}