将悬停覆盖在具有多个 div 的容器上？ （弹性盒）

Posted 2023-05-08

【中文标题】将悬停覆盖在具有多个 div 的容器上？ （弹性盒）

【英文标题】：Hover overlay on a container with multiple divs within? (flexbox)

【发布时间】：2019-07-12 06:15:59

【问题描述】：

我有一个包含多个 div 的 flex 容器。我试图弄清楚如何使用与容器大小相同的副本设置悬停覆盖黑色覆盖并覆盖容器内的 div。我假设有一种方法可以在没有 JS 的情况下使用 html 和 CSS 来做到这一点？这个想法是，当您将鼠标悬停在页面上的一个框上时，“阅读更多”通知会出现在 75% 透明的黑色覆盖层上。我现在只是为了“添加更多细节”而漫无目的

.box 
  display: flex;
  transition: background-color 0.5s ease;
  background: white;
  width: 23%;
  margin: 10px;
  color: black;
  font-weight: bold;
  font-size: .7em;
  text-align: center;
  justify-content: space-between;
  height: 40%;
  border-left: .5px solid black;
  border-right: .5px solid black;
  flex-direction: column;


#header-box 
  display: flex;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width: 100%;
  justify-content: flex-star;
  align-content: flex-start;
  font-family: 'Big Caslon';


#end-matter 
  display: flex;
  border-top: 10px solid black;
  border-bottom: 10px solid black;
  border-width: .5px;
  width: 100%;
  justify-content: space-around;


#sign-photo 
  display: flex;
  justify-content: center;


#aries 
  display: flex;
  width: 50%;
  justify-content: center;


.sign-copy 
  display: flex;
  padding-left: 5px;

<div class="box">
  <div id="header-box">
    <h2 class="sign-copy">
      Aries
    </h2>
  </div>
  <div id="sign-photo">
    <img id="aries" src="CSS/images/aries2.svg">
  </div>
  <div id="end-matter">
    <p>
      wtf
    </p>
    <p>
      weird content here
    </p>
    <p>
      time something?
    </p>
  </div>
</div>

【问题讨论】：

嗨，乔，欢迎来到 SO。你有任何可以附加的代码吗？很有帮助！

嗨，Joe，如果您可以使用 codepen.io/pen 创建问题示例，那么其他人可以提供解决方案。

您希望“阅读更多”通知出现在悬停时的每个单独的框上还是所有框上？

【参考方案1】：

您可以在特定的 css 类上使用 :hover 和 :after。

例如：

.container 
  border: 2px solid blue;
  display: flex;


.eachDiv 
  border: 1px solid red;
  background-color: gray;
  width: 33%;
  height: 50px;


.eachDiv:hover 
  color: purple;
  background-color: yellow;

 
.one:hover:after 
  content: "this is the first div!!!";

 
.two:hover:after 
  content: "el segundo div";

 
.three:hover:after 
  content: "three is the best";

 

<div class="container">
  <div class="eachDiv one">one</div>
  <div class="eachDiv two">two</div>
  <div class="eachDiv three">three</div>
</div>

注意：this answer 可能是您问题的更好解决方案。

【讨论】：

这不是答案，请使用 cmets 的评论部分。

@Zac 用一些示例代码更新了我的答案，显示了 :hover 和 :after 的使用