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

关键词：

【中文标题】仅使用 CSS，将鼠标悬停在另一个元素上时显示 div【英文标题】：Using only CSS, show div on hover over another element 【发布时间】：2011-07-09 18:19:36 【问题描述】：

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

【问题讨论】：

div 必须在 a 标签内.. 当您发现这种技术似乎“失效”时，请查看***.com/questions/3847568/… 请记住 :hover 在触摸屏上的工作方式并不相同，现在应谨慎使用（例如，避免用于显示其他导航元素） @Pawel Bulwan 我将此处的 ":hover" 与 "+" CSS 选择器建议与用于在点击时显示内容的 :target 建议（来自 ***.com/questions/18849520/…）结合到一个应该使用的解决方案中鼠标和触摸 - zoomicon.wordpress.com/2017/11/25/… 跟进我的上一条评论，还可以在我对该博客文章所做的评论回复中看到一些有用的变化：zoomicon.wordpress.com/2017/11/25/… 【参考方案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属性。

【讨论】：

很好的解决方案，即使你放 div:hover display: block; 那么当你悬停 div 本身时 div 也不会隐藏.. 这将使页面上的每个<div> display:none 以及当鼠标悬停在“悬停在我身上！”它将使每个<div> 跟随<a> 在同一个父display:block 内。通过.class-name 或#id 选择可能是一个更好的主意。否则，好帖子。 添加 div:hover display:block; 以在鼠标悬停时将其拒之门外 谨慎的做法是使用可见性而不是显示。我记得，它更有效，因为 display 每次都会重绘 div。虽然对于一个 div 可能无关紧要，但如果您必须做很多，最好让它们不可见。 @Yi Jiang - 你是如何将这段代码添加到答案中的？【参考方案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 更适合工具提示。

【讨论】：

内联元素中不能有块元素，除非您使用的是 HTML 5。 HTML5还不是标准，所以易江的方法更好。 我更了解它，这就是我支持它的原因:) 我举了一个可行的例子，提出了一个概念（更具体地说是 css 选择器），不明白为什么不支持它^^ 这个用<span>s可能会更好，但我觉得这个例子比蒋毅的更好。【参考方案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>

【讨论】：

这很棒，我用它来制作更大的 div。如果我将光标从“悬停”div 移动到“stuff”div，我希望“stuff”div 保持可见，因此我将最后一个样式元素从#hover:hover + #stuff 更改为#hover:hover + #stuff, #stuff:hover 。然后，当您移过该 div 时，“stuff” div 仍然可见！【参考方案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 覆盖了大部分页面，因此这种技术使它更加永久，而不是随着鼠标的每次移动屏幕从一个状态闪烁到另一个状态。它实际上非常直观，因此我为自己感到非常自豪。

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

【讨论】：

【参考方案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。

【讨论】：

很好的解决方案。谢谢【参考方案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;

需要注意的几点是：

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

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

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

【讨论】：

【参考方案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>

【讨论】：

【参考方案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>

【讨论】：

【参考方案9】：

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

div:hover 
    display: block;

【讨论】：

【参考方案10】：

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

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

【讨论】：

【参考方案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>

【讨论】：

【参考方案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

【讨论】：

【参考方案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>

【讨论】：

【参考方案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，那么它就不起作用了。

【讨论】：

【参考方案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>

【讨论】：

使用 css 将鼠标悬停在第一个子元素上时更改其他子元素

】使用css将鼠标悬停在第一个子元素上时更改其他子元素【英文标题】：Changingotherchildelementswhenhoveringoverfirstchildusingcss【发布时间】：2013-02-0502:18:06【问题描述】：我试图在div的第一个孩子上使用悬停来影响第三个孩子。有谁知... 查看详情

HTML/CSS - 将鼠标悬停在照片上时显示链接

】HTML/CSS-将鼠标悬停在照片上时显示链接【英文标题】：HTML/CSS-Displaythelinkwhilehoveringoveraphoto【发布时间】：2020-12-0416:15:49【问题描述】：我希望在将鼠标悬停在图像上时显示我的链接。我编写代码的方式仅在我将鼠标悬停在链... 查看详情

将鼠标悬停在 X 上时，如何仅在单个列表中显示 X？

】将鼠标悬停在X上时，如何仅在单个列表中显示X？【英文标题】：HowcanIdisplaytheXonlyinsinglelistwhenIhoveronit?【发布时间】：2021-11-2315:51:28【问题描述】：当我将鼠标悬停在单个列表中时，我遇到了问题。当我悬停它时，我只想在一... 查看详情

仅使用 css 更改另一个 div 的样式

】仅使用css更改另一个div的样式【英文标题】：changeanotherdiv\'sstylingusingonlycss【发布时间】：2013-07-1416:43:34【问题描述】：我使用css在我的网站中创建了这个悬停地图：http://travel-fellow.com/destinations当您悬停在大陆上时，它会改变... 查看详情

在悬停时显示一个 DIV，但在另一个悬停的 DIV 内。使用 CSS

】在悬停时显示一个DIV，但在另一个悬停的DIV内。使用CSS【英文标题】：DisplayaDIVonhover,overbutwithinanotherDIVwhichishoveredover.WithCSS【发布时间】：2013-12-2804:24:27【问题描述】：我正在尝试获取它，因此当我将鼠标悬停在一个DIV上时，... 查看详情

当我将鼠标悬停在另一个 div 上时，如何使文本出现在一个 div 中？

...特定div中每个链接的额外信息。如果这样更容易，我可以使用JavaScri 查看详情

jQuery将div悬停在另一层下方

...素B、C、D位于元素A上方“绝对定位”。因此，当用户的鼠标移到元素B、C上时，D，即使B、C和D直接位于元素上方，也不再触发 查看详情

将鼠标悬停在容器上时的 CSS 变换图像

...【发布时间】：2011-09-3002:19:44【问题描述】：有没有办法使用CSS制作容器，例如：#p-container.p-categories-item影响该div中的图像？我在图像上有一个CSS动画，但我希望它在我将鼠标悬停在整个元素上时播放，而不仅仅是实际图像本身... 查看详情

是否可以通过 CSS 将鼠标悬停在另一个元素上来更改 img src

】是否可以通过CSS将鼠标悬停在另一个元素上来更改imgsrc【英文标题】：IsitpossibletochangeimgsrcbyhoveronanotherelementbyCSS【发布时间】：2018-08-0820:36:35【问题描述】：当div元素悬停时，CSS中是否可以更改imgsrc？<aclass="template-image"href="... 查看详情

当我使用 jquery 将鼠标悬停在图标上时如何显示一个简单的文本框

】当我使用jquery将鼠标悬停在图标上时如何显示一个简单的文本框【英文标题】：HowtoshowasimpletextboxwhenIhoveroveraniconusingjquery【发布时间】：2012-07-3116:08:19【问题描述】：我在html中有一个输入字段，该字段旁边有一个帮助图标(?)... 查看详情

当鼠标悬停在另一个 Div 上时为一个 Div 设置动画

】当鼠标悬停在另一个Div上时为一个Div设置动画【英文标题】：AnimateoneDivwhenthemousehoversoveranother【发布时间】：2012-01-1023:38:43【问题描述】：当鼠标悬停在页面其他地方的另一个div标签上时，我希望为一个div设置动画。举个例子... 查看详情

使用css将鼠标悬停在按钮上时如何更改站点背景图像？

】使用css将鼠标悬停在按钮上时如何更改站点背景图像？【英文标题】：HowcanIchangeasitesbackgroundimagewhenhoveringoverabuttonusingcss?【发布时间】：2019-08-2405:26:12【问题描述】：对于一个学校项目，我们需要使用html、css和php制作一个基... 查看详情

CSS - 将鼠标悬停在 li 元素上时执行转换（下拉菜单）

】CSS-将鼠标悬停在li元素上时执行转换（下拉菜单）【英文标题】：CSS-performtransitionwhenhoveroverlielement(dropdownmenu)【发布时间】：2013-07-3014:57:45【问题描述】：我正在制作这样的主页：http://jsbin.com/umaguc/1/，我目前正在处理下拉菜... 查看详情

将鼠标悬停在 li 上时更改图像并使用 CSS 永久保存该图像

】将鼠标悬停在li上时更改图像并使用CSS永久保存该图像【英文标题】：ChangeimagewhenhoveringoverliandkeepthatimagepermanentusingCSS【发布时间】：2016-09-2210:05:42【问题描述】：对于我的生活，我无法弄清楚。本质上，有一个在页面访问时... 查看详情

仅更改悬停元素内的类

...停在食谱图像上时显示报价（如果存在）。现在，我正在使用这个：$(".recipe").hover(function()$(".slider-submi 查看详情

CSS 导航：当鼠标悬停在图标上时，图标应替换为文本链接

】CSS导航：当鼠标悬停在图标上时，图标应替换为文本链接【英文标题】：CSSNavigation:Whenhoveringovericon,iconshouldbereplacedwithtextlink【发布时间】：2013-05-1914:17:06【问题描述】：我的导航栏中有这样的图标(http://d.pr/i/NP2T)。当我将鼠标... 查看详情

将鼠标悬停在另一个div上显示div(代码片段)

我试图将鼠标悬停在<div>上时会显示另一个<div>。我有以下代码：.showme7 display:none; .single-fun-fact:hover.showme7 display:block; <divid="hulk"class="single-fun-fact"> <pc 查看详情

悬停、鼠标悬停和鼠标移出

...发布时间】：2011-05-2616:33:45【问题描述】：我正在学习和使用jQuery，并希望为某些元素显示一个删除图标。我有一个外部主div，其中包含元素的包装器数量。在元素包装器内部，我想在用户将鼠标悬停在元素包装器上时显示一个... 查看详情