CODEWITHSUNDEEP
htmlcsscss-selectors
Max
Max

Reputation: 1131

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

Upvotes: 1

Views: 236

Answers (5)

joakimbeng
joakimbeng

Reputation: 877

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)

Upvotes: 1

Johan
Johan

Reputation: 5063

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.

Upvotes: 2

Aleks G
Aleks G

Reputation: 57346

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

Upvotes: 0

Greg
Greg

Reputation: 8784

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

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

http://jsfiddle.net/eMPKD/

Upvotes: 0

Stanley
Stanley

Reputation: 4035

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/

Upvotes: 1

Related Questions