Question

如何才能为非“悬停”元素设置样式？

例如：

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

输入3悬停。我希望它具有默认值。

input {
  background-color:red;
}

Answer 1

在悬停元素中取消设置：

input {
  background-color: red;
}

input:hover {
  background-color: transparent;
}

transparent是background-color的默认值，如果没有设置，所以显式设置会强制它为默认值。

Answer 2

我并不完全得到你所要求的但这可能会有所帮助

input:not(:hover) {
}

顺便说一下CSS3选择器，所以它不支持旧版浏览器。

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

Answer 3

如果你想要每个输入项目（全部四个）都有一个默认状态，当它们都没有悬停时，我是否理解它是正确的？当一个项目悬停时，所有其他项目都会得到另一种风格？

如果是这样，也许你可以这样做：

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 */
}

那样的东西？（我自己没试过，但我觉得它应该有效）

Answer 4

不确定你在寻找什么，但试试这个：

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

http://jsfiddle.net/eMPKD/

Answer 5

我不确定你的意思是“不是没有徘徊”。您执行此操作的方式是设置默认样式，然后为“悬停”设置单独的样式：

input {
    background-color: red;
}

input:hover {
    background-color: grey;
}

设置风格，不仅仅是悬停元素

5 个答案: