只使用CSS，在悬停在另一个元素上时显示div

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

870130 次浏览
小开 

.showme {
display: none;
}


.showhim:hover .showme {
display: block;
}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>

jsfiddle

既然这个答案很受欢迎，我认为需要一个小小的解释。使用此方法，当你悬停在内部元素上时，它不会消失。 因为.showme在.showhim内，当你将鼠标移动到两行文本之间时(或无论它是什么)，它不会消失。< / p >

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

这完全取决于你需要这个做什么。这个方法更适合于菜单风格的场景，而易江的方法更适合于工具提示。

小开
最佳答案
你可以像这这样做: 
div {
display: none;
}
    

a:hover + div {
display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>

它使用相邻兄弟选择器，并且是Suckerfish下拉菜单的基础。

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

小开

请测试这段代码

<!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 {
display: none;
}


a:hover > div {
display: block;
}

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

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

也许这并不是很有用，但是我必须将我所显示的div设置为overflow: auto，所以有时它有滚动条，当你离开div时就不能使用。

事实上，在最终解决了如何使显示的div，(虽然它现在是触发器的子，而不是兄弟)，坐在触发器后面，在z-index方面，(从本页:如何让一个父元素出现在子元素上面中得到一点帮助)，你甚至不需要滚动显示的div来滚动它，只需停留在触发器上方并使用您的转轮，或其他任何东西。

我所显示的div覆盖了大部分页面，因此这种技术使它更加持久，而不是随着鼠标的每一次移动屏幕从一个状态闪烁到另一个状态。这真的很直观，所以我真的很为自己感到骄傲。

唯一的缺点是你不能把链接放在整个东西里面，但是你可以把整个东西作为一个大链接使用。

小开

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

div:hover {
display: block;
}
小开

我想提供这个通用模板解决方案，它扩展了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的位置被设置为fixed(也可以用absolute)，所以内容不在正常的文档流中，这使得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和谷歌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在将cusor移出div.information时能够接收悬停。

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

有关弹出式多层菜单的完整示例，请参阅fiddle http://jsfiddle.net/F68Le/。

小开

我发现使用不透明度更好，它允许你添加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>

小开

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

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

它使用相邻兄弟选择器和不选择器。

小开

从我的测试使用这个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，那么它将不起作用。

小开

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

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>

小开

超文本标记语言

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

CSS

 div+div {
display: none;
}


div:hover +div {
display: block;
}

< a href = " https://codepen。io/KondalDurgam/pen/NYpooe" rel="nofollow noreferrer">CodePen:悬停在div显示文本在另一个div

小开
< p >不要忘记。如果您试图将鼠标悬停在图像上，则必须将其放置在容器周围。 css: < / p > 
.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>
小开

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

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>

小开
虽然已经是一个很好的回答问题，我只是抓住机会把我的答案贴在这里。 只要在W3Schools查看这个页面，你就会有一个详细的答案

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

小开

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

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

提交答案