javascript - 如何将叠加层悬停在flex容器中的flex项目上
问题描述
这是我的代码。我想将灰色叠加层覆盖在每个 flexItem 的内容上。该层也必须在图像之上。我找不到解决方案,有人有什么想法吗?
我尝试在 flexCont 上使用相对位置,在 flexItem 覆盖上使用绝对位置,但无事可做。
我在 js 中有一个在悬停时应用覆盖类的函数,如果你不悬停更多,则将其删除
$('.flexItem').hover(
function() {
$(this).addClass( 'overlay' );
console.log('hover')
}, function() {
$(this).removeClass( 'overlay' );
console.log('no hover')
}
);
.flexCont{
display: flex;
display: -ms-flex;
display: -webkit-flex;
flex-direction: row;
}
.flexContO{
display: flex;
display: -ms-flex;
display: -webkit-flex;
flex-direction: row;
}
.flexContO>div{
width:50%;
}
.flexCont .flexItem{
flex: 1 1 25%;
}
.flexItem{
display: flex;
flex-direction: column;
}
.overlay{
background-color: rgba(0,0,0,0.5); /*dim the background*/
position: relative;
z-index:999!important;
}
.flexItemV{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.flexItemO{
display: flex;
flex-direction: row;
}
.flexItemO>div{
width:50%;
}
.flexItem1{
height:375px;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
text-align:center;
padding:20px;
}
.flexItem2>img{
width: 100%;z-index:99!important;
}
.flexItemV1{
}
.flexItemV2{
}
.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
<div class="flexItem">
<div class="flexItem1">
<p>Place</p>
<h3>u & d 4</h3>
<a href="http//link/u-d/">sometext bla bla </a><br><a href="http//link/u-d/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
</div>
<div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
</div>
<div class="flexItem">
<div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
<div class="flexItem1">
<p>Place</p>
<h3>d & u 3</h3>
<a href="http//link/d-u/">sometext bla bla </a><br><a href="http//link/d-u/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
</div>
</div>
<div class="flexItem">
<div class="flexItem1">
<p>Place</p>
<h3>d & u 2</h3>
<a href="http//link/matrimonio-test2/">sometext bla bla </a><br><a href="http//link/matrimonio-test2/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
</div>
<div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
</div>
<div class="flexItem">
<div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
<div class="flexItem1">
<p>Place</p>
<h3>u & d 1</h3>
<a href="http//link/matrimonio-test/">sometext bla bla </a><br><a href="http//link/matrimonio-test/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
</div>
</div>
</div>
解决方案
您可以使用以下更新的代码:
$('.flexItem').hover(
function() {
$(this).addClass( 'overlay' );
$(this).find('img').css('opacity', '0.6');
//console.log('hover')
}, function() {
$(this).removeClass( 'overlay' );
$(this).find('img').css('opacity', '1');
//console.log('no hover')
}
);
.flexCont{
display: flex;
display: -ms-flex;
display: -webkit-flex;
flex-direction: row;
}
.flexContO{
display: flex;
display: -ms-flex;
display: -webkit-flex;
flex-direction: row;
}
.flexContO>div{
width:50%;
}
.flexCont .flexItem{
flex: 1 1 25%;
}
.flexItem{
display: flex;
flex-direction: column;
}
.overlay{
background-color: rgba(0,0,0,0.5); /*dim the background*/
position: relative;
z-index:999!important;
}
.flexItemV{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.flexItemO{
display: flex;
flex-direction: row;
}
.flexItemO>div{
width:50%;
}
.flexItem1{
height:375px;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
text-align:center;
padding:20px;
}
.flexItem2>img{
width: 100%;
z-index:99!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
<div class="flexItem">
<div class="flexItem1">
<p>Place</p>
<h3>u & d 4</h3>
<a href="http//link/u-d/">sometext bla bla </a><br><a href="http//link/u-d/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
</div>
<div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
</div>
<div class="flexItem">
<div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
<div class="flexItem1">
<p>Place</p>
<h3>d & u 3</h3>
<a href="http//link/d-u/">sometext bla bla </a><br><a href="http//link/d-u/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
</div>
</div>
<div class="flexItem">
<div class="flexItem1">
<p>Place</p>
<h3>d & u 2</h3>
<a href="http//link/matrimonio-test2/">sometext bla bla </a><br><a href="http//link/matrimonio-test2/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
</div>
<div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
</div>
<div class="flexItem">
<div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
<div class="flexItem1">
<p>Place</p>
<h3>u & d 1</h3>
<a href="http//link/matrimonio-test/">sometext bla bla </a><br><a href="http//link/matrimonio-test/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
</div>
</div>
</div>
推荐阅读
- r - 如何在 flexdashboard/shiny 中反应性地总结(dplyr)用户指定的变量?
- excel - 如果满足 F 列中的条件,如何执行将在 A 列中返回单词“New”的 if 语句?
- java - spark-submit 抛出 java.lang.ClassNotFoundException: SparkPIIDetector
- perl - Perl 将自纪元以来的微秒转换为本地时间
- scala - 我们可以通过 Spark Streaming 使用来自 Topic 的 JMS 消息吗?
- java - Kotlin - 无法创建两个具有不同列表类型参数的构造函数
- javascript - 如何从服务器请求角度通用发送cookie中的令牌?
- r - 闪亮的图像托管
- angular - Angular 8 CLI:在开发服务中禁用差异加载
- jar - 单独运行 WireMock 服务器