这是我的代码。我想将灰色覆盖在每个 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>
关于javascript - 如何将悬停叠加到 flex 容器中的 flex 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52479324/