仅使用CSS，将div悬停在<a>上时显示div

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

您可以执行以下操作：

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

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

这使用相邻的兄弟选择器，是the 鱼下拉菜单的基础。

HTML5允许锚元素包装几乎所有内容，因此在这种情况下，div可以使该元素成为锚的子级。否则原理是相同的-使用:hover伪类更改display另一个元素的属性。

.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的适用于工具提示。

我发现使用opacity更好，它可以让您添加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>

我是专家，但是我为自己为代码做出了一些贡献而感到自豪。如果您这样做：

div {
    display: none;
}

a:hover > div {
    display: block;
} 

（请注意'>'），您可以将整个内容包含在一个标签中，然后，只要您的触发器（可以在其自己的div中，或直接在该标签中，或您想要的任何东西）触碰到显示的div，您可以将鼠标从一只移动到另一只。

也许这对很多事情没有用，但是我不得不将显示的div设置为溢出：auto，因此有时它具有滚动条，一旦离开div便无法使用。

实际上，在最终确定如何使显示的div正确之后（尽管它现在是触发器的孩子，而不是同级兄弟），就z-index而言，坐在触发器的后面（在此页面的帮助下） ：如何使父元素出现在child上方），您甚至不必将鼠标悬停在显示的div上即可滚动它，只需将鼠标悬停在触发器上并使用滚轮即可。

我所显示的div覆盖了整个页面的大部分内容，因此此技术使其变得更加永久，而不是随着鼠标的每次移动屏幕从一种状态闪烁到另一种状态。实际上，这真的很直观，因此为什么我真的为自己感到骄傲。

唯一的缺点是您不能在整个事物中放置链接，但可以将整个事物用作一个大链接。

此答案不需要您知道在显示时可隐藏元素应该是哪种类型的显示（内联等）：

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

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

我想提供这种通用模板解决方案，该解决方案扩展了Yi Jiang提供的正确解决方案。

其他好处包括：

• 支持将鼠标悬停在任何元素类型或多个元素上；
• 弹出窗口可以是任何元素类型或元素集，包括对象；
• 自我证明代码；
• 确保弹出窗口出现在其他元素上方；
• 如果从数据库生成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.information移开时，几个像素足以确保div.popup可以接收到悬停。

这在Internet Explorer 10.0.9200中无法正常工作，在Opera 12.16，Firefox 18.0和Google Chrome 28.0.15中工作正常。

有关带有弹出式多级菜单的完整示例，请参见小提琴http://jsfiddle.net/F68Le/。

请测试此代码

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

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

div:hover {
    display: block;
}

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

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>

根据我使用此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，则它将不起作用。

的HTML

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

的CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen：将鼠标悬停在div上将文本显示在另一个div中

别忘了 如果您要在图像上悬停，则必须将其放在容器周围。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>