只使用CSS，将divhover在<a>上
我想显示一个div，当有人hover在<a>元素，但我想这样做在CSS而不是JavaScript。 你知道这可以实现吗？
你可以做这样的事情：
div { display: none; } a:hover + div { display: block; }
<a>Hover over me!</a> <div>Stuff shown on hover</div>
.showme{ display: none; } .showhim:hover .showme{ display : block; }
<div class="showhim">HOVER ME<div class="showme">hai</div></div>
我知道的意思是一个专家，但是我为自己对这个代码做了一些工作感到非常自豪。 如果你这样做：
div { display: none; } a:hover > div { display: block; }
（注意'>'）你可以在标签中包含整个东西，然后，只要你的触发器（可以在它自己的div中，或者直接在一个标签中，或者任何你想要的）触发显示的div，你可以将鼠标从一个移动到另一个。
也许这是没有用的很多，但我不得不设置我的显示的div溢出：汽车，所以有时它有滚动条，这是不能使用，只要你离开div。
事实上，在最终研究如何使显示的div（尽pipe它现在是触发器的孩子，而不是兄弟姐妹）坐在触发器的后面，用z-index（在这个页面的帮助下） ： 如何让父元素出现在孩子的上方 ）你甚至不需要翻转显示的div来滚动它，只要停留在触发器上并使用你的轮子，或者其他任何东西。
我的显示的div覆盖了大部分的页面，所以这个技术使得它更加永久，而不是每一次移动鼠标都从一个状态闪烁到另一个状态。 其实真的很直观，所以我为自己感到非常自豪。
唯一的缺点是你不能把链接放在整个事情中，但你可以把整个事情作为一个大的链接。
我发现使用不透明度更好，它允许您添加css3转换，以使一个不错的完成hover效果。 旧的IE浏览器只能删除这些转换，所以会优雅地降级。
#stuff { opacity: 0.0; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } #hover { width:80px; height:20px; background-color:green; margin-bottom:15px; } #hover:hover + #stuff { opacity: 1.0; }
<div id="hover">Hover</div> <div id="stuff">stuff</div>
我想提供这个通用模板解决scheme，扩展了Yi Jiang提供的正确解决scheme。
额外的好处包括：
- 支持hover在任何元素types或多个元素上;
- popup窗口可以是任何元素types或元素集合，包括对象;
- 自我logging代码;
- 确保popup显示在其他元素上;
- 如果您正在从数据库中生成html代码，则需要遵循这一基础。
在html中你放置以下结构：
<div class="information_popup_container"> <div class="information"> <!-- The thing or things you want to hover over go here such as images, tables, paragraphs, objects other divisions etc. --> </div> <div class="popup_information"> <!-- The thing or things you want to popup go here such as images, tables, paragraphs, objects other divisions etc. --> </div> </div>
在CSS中，你放置以下结构：
div.information_popup_container { position: absolute; width:0px; height:0px; /* Position Information */ /* Appearance Information */ } div.information_popup_container > div.information { /* Position Information */ /* Appearance Information */ } div.information_popup_container > div.popup_information { position: fixed; visibility: hidden; /* Position Information */ /* Appearance Information */ } div.information_popup_container > div.information:hover + div.popup_information { visibility: visible; z-index: 200; }
有几点要注意的是：
- 由于div.popup的位置被设置为固定的（也将以绝对方式工作），所以内容不在允许可见属性正常工作的文档的正常stream程内。
- z-index被设置为确保div.popup出现在其他页面元素之上。
- information_popup_container被设置为一个小尺寸，因此不能被hover。
- 此代码仅支持hover在div.information元素上。 要支持hover在div.information和div.popup上，请参阅下面的hover在popup窗口上。
- 它已经过Opera 12.16 Internet Explorer 10.0.9200，Firefox 18.0和Google Chrome 28.0.15的testing和预期的工作。
hover在popup窗口
作为附加信息。 当popup窗口包含您可能想要剪切和粘贴的信息或者包含您可能想与之交互的对象时，请首先replace：
div.information_popup_container > div.information:hover + div.popup_information { visibility: visible; z-index: 200; }
同
div.information_popup_container > div.information:hover + div.popup_information ,div.information_popup_container > div.popup_information:hover { visibility: visible; z-index: 200; }
其次，调整div.popup的位置，以便与div.information重叠。 几个像素就足以确保div.popup可以在closuresdiv.information时closureshover。
这在Internet Explorer 10.0.9200中无法正常工作，Opera 12.16，Firefox 18.0和Google Chrome 28.0.15也能正常工作。
这个答案并不要求你知道什么types的显示器（内联等）的可隐藏元素应该是显示时：
.hoverable:not(:hover) + .show-on-hover { display: none; }
<a class="hoverable">Hover over me!</a> <div class="show-on-hover">I'm a block element.</div> <hr /> <a class="hoverable">Hover over me also!</a> <span class="show-on-hover">I'm an inline element.</span>
请testing这个代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> div { display:none; color:black width:100px; height:100px; background:white; animation:myfirst 9s; -moz-animation:myfirst 9s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ } @keyframes myfirst { 0% {background:blue;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:white;} 50% {background:blue;} 100% {background:green;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } a:hover + div{ display:inline; } </style> </head> <body> <a href="#">Hover over me!</a> <div>the color is changing now</div> <div></div> </body> </html>
对于我来说，如果我想与隐藏的div进行交互而不会看到它每次离开触发元素（在这种情况下）消失，我必须添加：
div:hover { display: block; }
从我的testing使用这个CSS：
.expandable{ display: none; } .expand:hover+.expandable{ display:inline !important; } .expandable:hover{ display:inline !important; }
而这个HTML：
<div class="expand">expand</div> <div class="expand">expand</div> <div class="expandable">expandable</div>
，结果是它使用第二个扩展，但不扩展使用第一个。 所以如果hover目标和隐藏的div之间存在div，那么它将不起作用。
