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

这些是在实施此类行为时需要注意的问题示例。

这完全取决于你需要的东西。对于菜单样式场景，此方法更好，而Yi Jiang更适合工具提示。

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

（注意'＆gt;'）你可以在一个标签中包含整个东西，然后，只要你的触发器（可以在它自己的div中，或直接在a标签中，或任何你想要的东西））物理触摸显示的div，你可以将鼠标从一个移动到另一个。

也许这对于很多很有用，但是我必须将我的显示div设置为溢出：auto，所以有时它会有滚动条，一旦你离开div就无法使用它。

事实上，在最终弄清楚如何制作显示的div之后（虽然它现在是触发器的孩子，而不是兄弟姐妹），在z-index方面坐在触发器后面（稍微帮助）从这个页面：How to get a parent element to appear above child）你甚至不必滚动显示的div来滚动它，只是停留在触发器上并使用你的轮子，或者其他什么。

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

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

Answer 5

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

其他好处包括：

支持将鼠标悬停在任何元素类型或多个元素上;
弹出窗口可以是任何元素类型或元素集，包括对象;
自我记录代码;
确保弹出窗口显示在其他元素上;
如果您要从数据库生成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的位置设置为fixed（也适用于绝对值），所以内容不在文档的正常流程中，这使得visible属性可以正常工作。
设置z-index以确保div.popup显示在其他页面元素之上。
information_popup_container设置为较小的尺寸，因此无法悬停。
此代码仅支持将鼠标悬停在div.information元素上。为了支持将鼠标悬停在div.information和div.popup上，请参阅下面的悬停在弹出窗口上。
已在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 6

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

＆＃13;

.hoverable:not(:hover) + .show-on-hover {
    display: none;
}

＆＃13;

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

＆＃13;

这使用adjacent sibling selector和not selector。

Answer 7

请测试此代码

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

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

div:hover {
    display: block;
}

Answer 9

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

＆＃13;

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

＆＃13;

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

＆＃13;

<a href="">Delete all obsolete informations</a><span id="help">?</span>
<div id="tooltip">All data older than 2 weeks will be deleted.</div>

＆＃13;

Answer 10

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 11

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

Answer 12

+只允许“选择”第一个非嵌套元素，>只选择嵌套的元素-最好使用~，它允许选择作为元素的子元素的任意元素父元素悬停。使用不透明度/宽度和过渡效果，您可以提供平滑的外观

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 </div>

<div class='bbb'>B
  <div class='ccc'>C
    <div class='ddd'>D</div>
  </div>
</div>

<div class='eee'>E
  <div class='fff'>F
    <div class='ggg'>G</div>
    <div class='hhh'>H</div>
  </div>
</div>

Answer 13

虽然已经是一个很好回答的问题，但我只是借此机会在这里发布我的答案。只需在 W3Schools 中查看此页面，您就会有详细的答案

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

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，则它将无效。

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

14 个答案:

需要注意的几点是：

将鼠标悬停在弹出窗口