我想显示一个div当有人悬停在<a>元素,但我想这样做在CSS而不是JavaScript。你知道这是怎么实现的吗?


当前回答

你可以这样做: div { 显示:没有; } A:hover + div { 显示:块; } <a>盘旋在我上方!< / > <div>悬停显示的东西</div>

这使用相邻的兄弟选择器,并且是suckerfish下拉菜单的基础。

HTML5允许锚元素包装几乎任何东西,所以在这种情况下div元素可以成为锚的子元素。否则,原理是相同的-使用:hover伪类来改变另一个元素的显示属性。

其他回答

+只允许'选择'第一个未嵌套的元素,>只允许选择嵌套的元素-最好使用~,它允许选择任意元素,即父悬浮元素的子元素。使用不透明度/宽度和过渡,你可以提供平滑的外观

Div{过渡:全部1} .ccc, .ggg{透明度:0;颜色:红} .ccc{高度:0} .aaa:hover ~ .bbb .ccc{透明度:1;高度:34px} .aaa:hover ~ .eee .fff .ggg{透明度:1} <div class="aaa">盘旋我…查看<br><br> </div> < div class = ' bbb > BBBBB < div class =“ccc”> CCCCC < div class = ' ddd ' > DDDDD < / div > < / div > < / div > < div class = ' eee ' > EEEEE < div class =”fff“> FFFFF < div class = ' ggg ' > GGGGG < / div > < div class = '终极战士' > HHHHH < / div > < / div > < / div >

你可以这样做: div { 显示:没有; } A:hover + div { 显示:块; } <a>盘旋在我上方!< / > <div>悬停显示的东西</div>

这使用相邻的兄弟选择器,并且是suckerfish下拉菜单的基础。

HTML5允许锚元素包装几乎任何东西,所以在这种情况下div元素可以成为锚的子元素。否则,原理是相同的-使用:hover伪类来改变另一个元素的显示属性。

基于主要答案,这是一个例子,有用的显示信息工具提示时单击?在链接附近:

document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; }; document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); } document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block'; e.stopPropagation(); }; #help { opacity: 0; margin-left: 0.1em; padding: 0.4em; } a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; } #tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; } <a href="">Delete all obsolete informations</a><span id="help">?</span> <div id="tooltip">All data older than 2 weeks will be deleted.</div>

HTML

<div>
    <h4>Show content</h4>
</div>
<div>
  <p>Hello World</p>
</div>

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

code depen:悬停在div上显示另一个div中的文本

这个答案不需要你知道什么类型的显示(内联等)隐藏元素应该显示时:

.hover:not(:hover) + .show-on-hover { 显示:没有; } <a class="hoverable">在我上方盘旋!< / > >我是一个块元素 <人力资源/ > <a class="hoverable">也在我上方盘旋!< / > >我是一个内联元素

这使用了相邻的兄弟选择器和not选择器。