仅使用CSS,将鼠标悬停在<a>上

Question

当有人在一个<a>元素上盘旋时,我想展示一个div ,但我想在CSS而不是JavaScript中这样做.你知道怎么做到这一点吗？

Answer 1

你可以这样做此:

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

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

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

Answer 2

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}

<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

的jsfiddle

由于这个答案很受欢迎,我认为需要一个小的解释.当您将鼠标悬停在内部元素上时,使用此方法,它不会消失.因为.showme位于.showhim内部,所以当您在两行文本(或其他任何内容)之间移动鼠标时,它不会消失.

这些是在实现此类行为时需要注意的示例.

这一切都取决于你需要的东西.这种方法对于菜单风格的场景更好,而易江则更适合于工具提示.

Answer 3

我发现使用不透明度更好,它允许你添加css3过渡来做一个漂亮的完成悬停效果.旧版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>

Answer 4

我知道这意味着一位专家,但我为自己做了一些关于这段代码的事情感到非常自豪.如果你这样做:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

(注意'>')你可以在一个标签中包含整个东西,然后,只要你的触发器(可以在它自己的div中,或直接在a标签中,或你想要的任何东西)是物理接触显示的div,你可以将鼠标从一个移动到另一个.

也许这对于大量的事情没有用,但是我必须将我显示的div设置为溢出:auto,所以有时它有滚动条,一旦你离开div就不能使用它.

事实上,在最终弄清楚如何制作显示的div之后(尽管它现在是触发器的子节点,而不是兄弟节点),在z-index方面坐在触发器后面(在此页面的帮助下) :如何让父元素出现在子元素之上)你甚至不必滚动显示的div来滚动它,只是保持盘旋在触发器上并使用你的轮子,或者其他什么.

我透露的div覆盖了页面的大部分内容,因此这种技术使其更加永久,而不是每次移动鼠标时屏幕从一个状态闪烁到另一个状态.实际上它非常直观,因此我为自己感到非常自豪.

唯一的缺点是你不能把链接放在整个事物中,但你可以将整个事物作为一个大的链接.

Answer 5

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

.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>

这使用相邻的兄弟选择器和非选择器.

Answer 6

我想提供这个通用的模板解决方案,扩展到易江提供的正确解决方案.

其他好处包括:

• 支持将鼠标悬停在任何元素类型或多个元素上;
• 弹出窗口可以是任何元素类型或元素集,包括对象;
• 自我记录代码;
• 确保弹出窗口显示在其他元素上;
• 如果从数据库生成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;
}

需要注意的几点是:

1. 因为div.popup的位置设置为fixed(也可以使用绝对值),所以内容不在文档的正常流程中,允许visible属性正常工作.
2. 设置z-index以确保div.popup出现在其他页面元素之上.
3. information_popup_container设置为小尺寸,因此不能悬停.
4. 此代码仅支持将鼠标悬停在div.information元素上.要支持将鼠标悬停在div.information和div.popup上,请参阅下面的悬停在弹出窗口上方.
5. 它已在Opera 12.16 Internet Explorer 10.0.9200,Firefox 18.0和Google Chrome 28.0.15中经过测试并正常运行.

将鼠标悬停在弹出窗口上

作为附加信息.当弹出窗口包含您可能想要剪切和粘贴的信息或包含您可能想要与之交互的对象时,请先替换:

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可以在从div.information移动cusor时接收悬停.

这与Internet Explorer 10.0.9200无法正常工作,并且与Opera 12.16,Firefox 18.0和Google Chrome 28.0.15一样正常工作.

有关弹出多级菜单的完整示例,请参阅小提琴http://jsfiddle.net/F68Le/.

Answer 7

在+允许“选择”只有第一没有嵌套元素时，>只有选择嵌套的元素-更好的是使用~允许选择哪个是父母的孩子任意元素徘徊元素。使用不透明度/宽度和过渡，您可以提供平滑的外观

div { transition: all 1s }
.ccc, .ggg { opacity: 0; color: red}
.ccc { height: 0 }

.aaa:hover ~ .bbb .ccc { opacity: 1; height: 34px }
.aaa:hover ~ .eee .fff .ggg { opacity: 1 }

<div class="aaa">Hover me... to see<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='hhh'>HHHHH</div>
  </div>
</div>