将覆盖悬停在具有多个div的容器中？ （Flexbox的）

Posted 2021-03-27

我有一个Flex容器，里面有多个div。我试图找出如何设置悬停覆盖黑色覆盖与副本大小与容器相同，并覆盖容器内的div。我假设有一种方法可以在没有JS的情况下使用html和CSS做到这一点？我们的想法是，当您将鼠标悬停在页面上的其中一个框中时，会在75％透明黑色覆盖上显示“READ MORE”通知。我现在只是为了“添加更多细节”而漫步

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

答案

您可以使用：hover以及：在特定的css类之后。

例如：

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

以上是关于将覆盖悬停在具有多个div的容器中？ （Flexbox的）的主要内容，如果未能解决你的问题，请参考以下文章

在具有相同类的一组 div 中悬停在单个 div 上时显示覆盖

如何让带有 z-index 的 div 在悬停时覆盖另一个 div

jQuery - 具有悬停效果的多个项目

多个 DIV 的 CSS 悬停效果不起作用 [重复]

悬停多个实例 div 时的独特声音

在容器内的另一个 div 下方显示具有动态高度的 div？