在悬停时向列添加半透明覆盖，同时删除标题答案

【问题标题】：Adding an semi-transparent overlay to a column on hover while also removing the title在悬停时向列添加半透明覆盖，同时删除标题
【发布时间】：2017-07-21 10:43:49
【问题描述】：

我正在尝试在悬停时为我的图像添加半透明叠加层。为了达到如下效果，我写了代码：

http://imgur.com/a/EnK3k

我想知道只有当用户将鼠标悬停在图像上时，我才能摆脱“数据仓库”文本。这是我的代码：

CSS：

.overlay {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #5e8cc9;
  z-index: 99;
}

.text {
  text-align: center;
  color: white;
  font-size: 60px;
  font-family: raleway;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 100;
}

.title {
  z-index: 98;
}

.container1:hover .overlay {
  opacity: .9;
}

.container1:hover .title {
  opacity: 0;
}

HTML：

<div class="overlay">
<div class="text">
<p style="text-align: center; font-size: 18px;">
<span style="color: #ffffff; font-weight: 200;">Cloud-Based | Single Tenant | Mosaic will operationalize warehouse in weeks with no start up cost | Mosaic takes care of all hosting, licensing and maintenance | Mosaic manages day to day operations | Highly flexible scalable warehouse model accommodates long-term evolution of data portfolio and sales operations | Mosaic implements new data sets and new requirements on demand</span></p>

</div>
</div>
<div class="title">
<h1 style="font-size: 56px; text-align: center; position: relative; top:     50%; line-height: 65px;"><span style="color: #ffffff; font-weight: 600;">Data     Warehouse</span></h1>
</div>

唯一的问题是当我制作时

.container1:hover .title {
opacity: 0;
}

，标题文本和覆盖被删除。我确信它是一个简单的修复，但任何帮助将不胜感激。谢谢

【问题讨论】：

您的 css 正在使用选择器 .container1 但您没有在 html 中的任何地方使用该类

标签： html css

【解决方案1】：

我没有让你的代码工作，但我不知道这是否是你正在寻找的 aswer，如果是我可以更详细地解释它，反正它很简单。首先，您必须定位元素将被悬停，然后定位其他元素，该元素将根据您声明的元素的悬停来更改其样式。示例：

.element:hover .title{
   color:red;
}

这将导致无论用户将元素悬停在何处，该元素内的标题都会变为红色。

我给你一个codepen，标题隐藏，覆盖层和标题隐藏https://codepen.io/Kristain/pen/QgeZJd

很高兴能帮上忙

【讨论】：

【解决方案2】：

看起来最大的问题是您需要根据共同的父母进行选择。所以淡入的文本和淡出的文本都需要在同一个元素中，让我们称之为“盒子”然后你会做.box:hover .title { opacity: 0; }和.box:hover .text { opacity: 1; }

这是一个例子。

body { background-color: #000; }
.box {
  background: url('https://unsplash.it/200') center center no-repeat;
  background-size: cover;
  color: #fff;
  position: relative;
  text-align: center;
  height: 500px;
  width: 500px;
}
.box__title {
  align-items: center;
  display: flex;
  font-size: 56px;
  font-weight: 600;
  height: 100%;
  justify-content: center;
  line-height: 1em;
  position: relative;
  transition: opacity 0.25s ease-in;
  width: 100%;
}
.box__text {
  align-items: center;
  background-color: rgba(255,0,0,0.5);
  display: flex;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.25s ease-in;
  width: 100%;
}
.box:hover .box__text {
  opacity: 1;
}
.box:hover .box__title {
  opacity: 0;
}

<div class="box">
  <div class="box__title">Data Warehouse</div>
  <div class="box__text">Cloud-Based | Single Tenant | Mosaic will operationalize warehouse in weeks with no start up cost | Mosaic takes care of all hosting, licensing and maintenance | Mosaic manages day to day operations | Highly flexible scalable warehouse model accommodates long-term evolution of data portfolio and sales operations | Mosaic implements new data sets and new requirements on demand</div>
</div>

【讨论】：