Html 如何编写CSS脚本以实现基于悬停的隐藏/显示效果

忽略internet explorer 6和后者，如何编写css脚本以实现以下结果：

它将隐藏信息，直到Upgrade I、Upgrade II或Upgrade III悬停。网站链接是

大约有500个这样的页面，因此在html中调整或添加javascript是不可行的。我认为CSS是实现这一点的方法，但我尝试过：

div.UpgradeI {display:none;} 
div.UpgradeI:hover {display:inline;} 

---

但它只是隐藏了一切，悬停时不显示信息。无论如何，如果仅仅使用css无法实现相同的结果，请告诉我要添加什么代码。谢谢

仅使用css很难做到这一点。因为一旦将元素样式设置为display:none，元素就不可能捕捉到：hover事件

我建议使用jquery在空白处创建一个placeholder元素。当鼠标悬停在该元素上时，显示可选的“real”元素

你可以试试这个插件，看看你是否喜欢它。

---

好的，用CSS可以做到这一点。首先，您建议的那些样式不起作用，因为如果它以display:none开头，那么就没有任何悬停的地方可以让下一个样式生效

我可以用Firebug将此添加到您的站点：

div.UpgradeI,
div.UpgradeII,
div.UpgradeIII {
   height:20px;
   overflow:hidden;
}

div.UpgradeI:hover,
div.UpgradeII:hover,
div.UpgradeIII:hover {
   height:auto;
}

这是历史上最丑陋的黑客行为，但它在不更改HTML或添加Javascript的情况下达到了预期效果。下面的段落没有向上滑动，因为所有内容都绝对定位。不过，如果您开始在其他所有内容中使用浮动样式，它就会起作用

显然，您可以根据需要编辑高度以显示更多/更少的div

UpgradeI table, UpgradeII table, UpgradeIII table {
    display: none;
}
UpgradeI table:first-child, UpgradeII table:first-child, UpgradeIII table:first-child {
    display: inline;
}
UpgradeI:hover table, UpgradeII:hover table, UpgradeIII:hover table {
    display: inline;
}

顺便说一句：你的标记很痛苦。

这在Firefox 4.0（可能还有Firefox 3.0、Chrome、Safari等；尽管我没有对它们进行测试）上有效。这在IE6上肯定不起作用，因为IE6不支持：悬停在任意元素上，：nth-child（）选择器和同级选择器（~）：

---

我在你的页面上看到了一些糟糕的标记……太多的表格了。@安德鲁·马歇尔：还有，

@BoltClock我很惊讶你居然能在那里找到它

；）。如果您使用静态HTML页面来构建整个网站，我认为我们无能为力。你现有的HTML几乎不可能使用CSS来达到你想要的效果。顺便说一句，有没有一种方法可以让所有的信息在鼠标悬停时都显示出来——而不仅仅是单个div？如果不添加更多的HTML/Javascript，你就没什么办法了。您的设置非常不灵活。当然，有很多简单的方法可以实现你想要的一切——只是不能使用CSS。@Jbrookover我可以知道要添加什么吗？我会尽量抽出一些时间来补充。这对我来说也是一个宝贵的教训和经验。提前谢谢！这个问题太宽泛了，这里无法描述。调查jQuery并使用“div”和定位元素而不是表。您将能够执行诸如$（“.UpgradeI”）.bind（“mouseover”，function（）{$（.details”）.show（）之类的操作；是的，我知道，还有别的办法吗？我应该用div代替桌子吗？结果不是一样吗？
div.UpgradeI table:first-child ~ *:nth-child(n+3), div.UpgradeII table:first-child ~ *:nth-child(n+3), div.UpgradeIII table:first-child ~ *:nth-child(n+3) {
    display: none;
}
div.UpgradeI table:first-child:hover ~ *, div.UpgradeII table:first-child:hover ~ *, div.UpgradeIII table:first-child:hover ~ * {
    display:  block;
}