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

Posted 2023-05-08

【中文标题】在悬停时显示一个 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/