仅使用 CSS，将鼠标悬停在另一个元素上时显示 div

Question

当有人将鼠标悬停在<a> 元素上时，我想显示一个 div，但我想在 CSS 而不是 JavaScript 中执行此操作。你知道这是如何实现的吗？

Answer 1

您可以执行this 之类的操作：

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

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

这使用adjacent sibling selector，是suckerfish dropdown menu 的基础。

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 内部，所以当您在两行文本（或其他任何内容）之间移动鼠标时，它不会消失。

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

这完全取决于您需要这个。这种方法更适合菜单风格的场景，而Yi Jiang's 更适合工具提示。

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;
} 

注意>，一个直接子选择器。

您可以将整个内容包含在 a 标签中，然后，只要您的触发器（可以在它自己的 div 中，或者直接在 a 标签中，或者您想要的任何东西）物理接触显示的 div，您可以将鼠标从一个移动到另一个。

也许这不是很有用，但我不得不将显示的 div 设置为溢出：自动，所以有时它有滚动条，一旦你离开 div 就无法使用它。

事实上，在最终弄清楚如何制作显示的 div 之后，（虽然它现在是触发器的子元素，而不是兄弟），就 z-index 而言，坐在触发器后面，（有一点帮助来自此页面：How to get a parent element to appear above child）您甚至不必滚动显示的 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>

这使用adjacent sibling selector 和not selector。

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 的位置设置为固定（也适用于绝对），因此内容不在文档的正常流程中，这使得可见属性可以正常工作。
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 时可以接收悬停。

这在 Internet Explorer 10.0.9200 上无法正常工作，但在 Opera 12.16、Firefox 18.0 和 Google Chrome 28.0.15 上却可以正常工作。

有关弹出式多级菜单的完整示例，请参阅 fiddle 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>

Answer 8

请测试此代码

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

Answer 9

对我来说，如果我想与隐藏的 div 交互而不看到它在每次离开触发元素时消失（在这种情况下为 a），我必须添加：

div:hover {
    display: block;
}

Answer 10

虽然这个问题已经得到了很好的回答，但我还是借此机会在这里发布了我的答案。 只需在 W3Schools 中查看此页面即可获得详细答案

https://www.w3schools.com/css/css_combinators.asp

Answer 11

根据主要答案，这是一个示例，可用于在单击链接附近的 ? 时显示信息工具提示：

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>

Answer 12

HTML

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

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen :hover on div show text in another div

Answer 13

如果你按照这个方法，即使你将鼠标悬停在隐藏的元素上，元素也会出现。如果您想单击隐藏元素，这将很有用。例如，您可能希望看到一个删除选项，然后单击它。

<style>
#delete_link {
    display: none;
}
    
a:hover + #delete_link {
    display: block;
}

#delete_link:hover{
    display: block;
}

</style>
</head>
<body>


<a>Hover over me!</a>
<div id="delete_link"><a href="#">Element show on hover</a></div>
</body>

Answer 14

根据我使用此 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>

，结果它确实使用第二个扩展，但不使用第一个扩展。所以如果悬停目标和隐藏的div之间有一个div，那么它就不起作用了。

Answer 15

别忘了。如果您试图将鼠标悬停在图像周围，则必须将其放在容器周围。 css：

.brand:hover + .brand-sales {
    display: block;
}

.brand-sales {
    display: none;
}

如果您将鼠标悬停在此：

<span className="brand">
   <img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg" 
     alt"some image class="product-card-place-logo"/>
</span>

这将显示：

<div class="product-card-sales-container brand-sales">
    <div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>