如何编写 CSS 脚本以实现基于悬停的隐藏/显示效果 [英] How to script CSS to achieve hide/appear effect based on hover

问题描述

忽略 Internet Explorer 6 及更高版本，我如何编写 css 脚本以实现以下结果:

Ignoring internet explorer 6 and latter, how do I script the css to achieve the following results:

它会隐藏信息，直到 UpgradeI、UpgradeII 或 UpgradeIII 悬停.网站链接是这里

It would hide the information until UpgradeI, UpgradeII or UpgradeIII is hovered. Site link is Here

大约有 500 个这样的页面，因此在 html 中调整或添加 javascript 是不可行的.我认为 CSS 是做到这一点的方法，但我已经尝试过:

There is around 500 pages like that, so tweaking or adding javascript in the html is not feasible. I think CSS is the way to go to do this, but I've tried:

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

但它只是隐藏了所有内容，并且在悬停时不显示信息.无论如何，如果仅使用 css 无法达到相同的结果，请告诉我要添加的代码.谢谢！

but it just hides everything and doesn't show the information when hovered. Anyway, if its not possible to achieve the same result using css only, please show me what code to add. Thanks!

推荐答案

好的，使用 CSS 可以做到这一点.首先，您建议的那些样式不起作用，因为如果它以 display:none 开头，则没有什么可悬停在下一个样式上.

Okay, it's possible to do this with CSS. First of all, those styles you suggest don't work because if it starts out with display:none, there is nothing to hover on for the next style to kick in.

我可以使用 Firebug 将其添加到您的网站:

I was able to add this to your site with Firebug:

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

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

那是历史上最丑陋的hack，但它在不更改HTML或添加Javascript的情况下达到了预期的效果.下面的段落不会向上滑动，因为一切都是绝对定位的.但是，如果您开始将浮动样式用于其他所有样式，它会起作用.

That is the ugliest hack in history, but it achieves the desired effect without changing the HTML or adding Javascript. The paragraph below doesn't slide up because everything is positioned absolutely. If you start using float styles for everything else, though, it'll work.

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

Obviously, you can edit the height to show more/less of the div as necessary.

这篇关于如何编写 CSS 脚本以实现基于悬停的隐藏/显示效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！