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

关键词：

【中文标题】在悬停时显示一个 DIV，但在另一个悬停的 DIV 内。使用 CSS【英文标题】：Display a DIV on hover, over but within another DIV which is hovered over. With CSS 【发布时间】：2013-12-28 04:24:27 【问题描述】：

我正在尝试获取它，因此当我将鼠标悬停在一个 DIV 上时，另一个 DIV 将显示在该 DIV 内但显示在当前内容上。因此，如果我有一个 500 x 500 像素的 DIV 并显示书籍封面，当我将鼠标悬停在它上面时，另一个 DIV 90% x 90% 的父 DIV 将出现在其中显示书籍详细信息，但在书籍封面上。

到目前为止，我所做的只是让 div 出现在悬停上，但它们被添加到父级拉伸中，制作滚动条等。

我尝试过使用 display: none 和 display: block and visibility hidden 和 searched 加载，但似乎没有一个允许在当前内容上显示 DIV。

这个小提琴是我能得到的最接近的，但它不会遍历主 DIV 中的内容，也不局限于主 DIV。 http://jsfiddle.net/vereonix/kPPFv/

    *
    margin:0;
    padding:0;

#content
    height:100%;
    width:100%;
    background-color: #CCCCCC;
    padding:0;
    margin:0;
    position:absolute;

#hoverbar
    height:90%;
    width:90%;
    background-color: #666;
    position:absolute;
    visibility:hidden;
    margin-left: 5%;
    margin-top: 5%;

#content:hover > #hoverbar
    visibility:visible;


<div id="content">
    image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br>
    <div id="hoverbar">
        details
    </div>
</div>

类似于本网站的内容：http://studionudge.com/

很遗憾，我没有任何当前代码可以显示，因为我只是在尝试小规模测试以找到解决方案。我已经尝试过诸如这些 SOF 问题的答案：

Using only CSS, show div on hover over <a>

CSS On hover show another element

但没有一个提供我认为我可以使用的结果。

我觉得我可能需要使用模态框获取元素类型交易，虽然我从来没有为悬停做过，只有点击。

希望这个问题是有效的，我很乐意让这个工作 -T​​om

【问题讨论】：

见***.com/questions/20465386/… 【参考方案1】：

您可以像这样使用position 属性：

HTML

<div class="book">
  <div class="info">More info here</div>
  <div class="image">
      Image here
  </div>
</div>

CSS

.book 
  position:relative;

.info 
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  display:none;

.book:hover .info
  display:block;

演示http://jsfiddle.net/6ReTK/10/

要获得一些效果，您可以使用 Jquery Fading 方法或使用 CSS 过渡：

info 
  transition:opacity 1s;
  opacity:0;

.book:hover .info
  opacity:1;

另一个演示http://jsfiddle.net/6ReTK/12/

【讨论】：

非常感谢你，很高兴知道我离我不远了，也非常感谢 lil'fade in n' out。 很高兴帮助你交配 很抱歉现在提出这么简单的问题，但我无法弄清楚是什么控制了信息 DIV 完全出现时的褪色程度。我把 rbg 挂在白色上，然后它就变稳定了，有没有办法让它稍微褪色而不是黑色？ 是的，使用 rgba() 你设置 rgb + alpha 然后白色就像 rgba(255,255,255,0.5) 其中 0.5 是 alpha 的值 啊可爱，我的网站现在看起来不像 1999 年了，谢谢大家的帮助。【参考方案2】：

margin-top 和 margin-left 仅相对于它们在 DOM 中的当前位置移动绝对定位的元素。 top、left、right 和 bottom 是用于移动绝对定位元素的 CSS 规则。例如，如果您在小提琴中添加top: 0; left 0;，您会得到我认为您所描述的行为。

【讨论】：

啊，我就快到那里了，我还是个新手，有些事情是如何运作的。【参考方案3】：

您只需要添加绝对定位坐标：top:0 和left:0。在这里摆弄：http://jsfiddle.net/kPPFv/2/

【讨论】：

display属性鼠标悬停时显示隐藏内容，

我想问下有没有办法，让鼠标悬停在一个div块时显示的隐藏内容，在鼠标移开后还显示的。就是保留悬停的所有结果。然后悬停在另一个div块时之前的效果又没了，保留现在的。如果能只用HTML和CSS解决最好，别的（麻烦写下注... 查看详情

悬停时显示另一个 div

】悬停时显示另一个div【英文标题】：Displayanotherdivonhover【发布时间】：2019-03-2205:39:25【问题描述】：当我将鼠标悬停在父div上时，如何展开默认隐藏的div？附图中显示了类似的内容。<divclass="rowtext-center"><divclass="col-md-6bo... 查看详情

在悬停时显示特定的非嵌套 div

】在悬停时显示特定的非嵌套div【英文标题】：Showaspecificnon-nesteddivonhover【发布时间】：2018-01-2602:17:07【问题描述】：我打算将两组div用作菜单。我做了一些Jquery代码来显示它们，它适用于一个，但如果我想创建更多，那么我会... 查看详情

仅在鼠标悬停 div 时显示滚动条

】仅在鼠标悬停div时显示滚动条【英文标题】：Showingscrollbarsonlywhenmouseoverdiv【发布时间】：2012-04-1809:54:52【问题描述】：鉴于此div：<divstyle="overflow:auto;"></div>如何使滚动条仅在鼠标悬停在div上时可见？我不希望滚动条... 查看详情

jQuery：悬停时显示和隐藏子div

】jQuery：悬停时显示和隐藏子div【英文标题】：jQuery:Showandhidechilddivwhenhovering【发布时间】：2011-02-0806:43:56【问题描述】：我有一套物品。每个项目都有两个图像和一些文本。对于图像，我创建了一个父div，它有一个溢出：隐藏... 查看详情

在悬停时显示 div（固定位置和溢出隐藏父级）

】在悬停时显示div（固定位置和溢出隐藏父级）【英文标题】：showdivonhover(fixedpositionandoverflowhiddenparent)【发布时间】：2014-10-1003:53:28【问题描述】：有一个固定侧边栏的网站，高度为100%。当您将鼠标悬停在占位符img上时，您可... 查看详情

在悬停时显示/隐藏 div 并悬停

】在悬停时显示/隐藏div并悬停【英文标题】：show/hideadivonhoverandhoverout【发布时间】：2012-06-2207:02:57【问题描述】：我想在悬停和悬停期间显示和隐藏div。这是我最近所做的。css$("#menu").hover(function()$(\'.flyout\').removeClass(\'hidden\');,... 查看详情

如何在鼠标悬停时显示隐藏的 div？

】如何在鼠标悬停时显示隐藏的div？【英文标题】：Howtoshowhiddendivsonmouseover?【发布时间】：2011-02-1200:30:18【问题描述】：如何显示一组隐藏的div的onmouseover？例如：<divid="div1">Div1Content</div><divid="div2">Div2Content</div&g... 查看详情

在 img 鼠标悬停时显示 div (jquery)

】在img鼠标悬停时显示div(jquery)【英文标题】：Displaydivonimgmouseover(jquery)【发布时间】：2013-02-0306:33:54【问题描述】：所以我正在研究将显示文本div的图像的鼠标悬停效果。我已经设置好了css，但是我在使用Jquery时遇到了问题。... 查看详情

如何在图像悬停时显示 div 或按钮？

】如何在图像悬停时显示div或按钮？【英文标题】：Howtoshowdivorbuttononimagehover?【发布时间】：2018-08-1508:55:03【问题描述】：仅适用于悬停的图像。<divclass=\'post_body\'><divclass=\'postentry-content\'><spanclass=\'lightbox\'><imgcla... 查看详情

仅在悬停时显示按钮

】仅在悬停时显示按钮【英文标题】：Showbuttononhoveronly【发布时间】：2017-04-1423:10:15【问题描述】：我已经阅读并尝试了解决我的问题的其他解决方案，但似乎都没有。我有3张图片，每张图片都在各自的4列div中。我设置了一个c... 查看详情

CSS在悬停另一个时显示隐藏元素

】CSS在悬停另一个时显示隐藏元素【英文标题】：CSSdisplayhiddenelementwhenhoveranother【发布时间】：2013-03-2617:19:38【问题描述】：当鼠标移到链接上时，我想为每个链接显示一个div元素。我的例子是4个链接和4个阴影标题..这些阴影... 查看详情

在悬停时显示不同的文本引导程序 3？

】在悬停时显示不同的文本引导程序3？【英文标题】：Onhovershowdiferrenttextbootstrap3?【发布时间】：2015-01-2718:37:47【问题描述】：我有一些导航必须对链接进行一些解释，但它必须在另一个元素中，而不是像弹出窗口或工具提示。... 查看详情

悬停 div 以在另一个 div 中显示更多内容

】悬停div以在另一个div中显示更多内容【英文标题】：Hoverdivtoshowmorethingsinsideanotherdiv【发布时间】：2015-01-1710:59:12【问题描述】：我在一个网站上工作，正在寻找一种功能，可以让我将一个div悬停在另一个div内滚动，就像这个... 查看详情

Jquery 鼠标悬停在 Div 类上

】Jquery鼠标悬停在Div类上【英文标题】：JquerymouseHoveronDivclass【发布时间】：2021-11-2817:44:26【问题描述】：我想添加鼠标悬停效果。它是一个具有相同div标签的产品部分，如果我将鼠标悬停在图像类上，我只想显示当前图像的标... 查看详情

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

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

半秒后使用 AngularJS 在鼠标悬停时显示子菜单

】半秒后使用AngularJS在鼠标悬停时显示子菜单【英文标题】：ShowsubmenuonmouseoverusingAngularJSafterhalfasecond【发布时间】：2018-01-1606:59:54【问题描述】：我正在尝试使用AngularJS创建一个导航栏。我需要分别在“div.menu-links”上的mouseover... 查看详情

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

】当我将鼠标悬停在另一个div上时，如何使文本出现在一个div中？【英文标题】：HowdoImaketextappearinadivwhenIhoveroveranother?【发布时间】：2021-02-0313:38:15【问题描述】：我已经为我的网站创建了一个主页，其中包含所有方面的概述。... 查看详情