这是我的代码。我想在每个flexItem的内容上放置灰色覆盖。图层也必须在图像上方。我找不到解决方案,任何人都有一些想法?
我尝试在flexCont上的相对位置,并在flex项目重叠但绝对无关。
我有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>
你这里没有任何实际的“叠加”,你只是设置.flexItem
元素本身的背景。因此,当然,您设置的背景颜色不会“覆盖”图像,因为图像是元素的内容,而背景则是背面......
您可以简单地使用位于元素其余部分的伪元素:
$('.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;
position: relative;
}
.overlay::after{
content: "";
position: absolute;
top:0; bottom:0; left:0; right:0;
background-color: rgba(0,0,0,.5); /*dim the background*/
}
.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
中的单独元素
$('.flexItem').hover(
function() {
$(this).find('.overlay').show();
},
function() {
$(this).find('.overlay').hide();
}
);
.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;
position: relative; /* Added */
}
.overlay {
background-color: rgba(0, 0, 0, 0.5);
position: absolute; /* Changed from relative */
top: 0; /* Added */
left: 0; /* Added */
width: 100%; /* Added */
height: 100%; /* Added */
display: none; /* Added */
}
.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%;
}
.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 class="overlay"></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 class="overlay"></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 class="overlay"></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 class="overlay"></div>
</div>
</div>
在所有其他解决方案中,您链接是不可点击的,这里是完整的解决方案,其中灰色调光器覆盖图像并提供您确切想要的实际效果。
$(".flexItem").mouseover(function(){
$(".overlay-items").css("height", $(".flexItem").outerHeight());
});
.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;
position: relative;
}
.overlay-items{
background-color: rgba(0,0,0,0.5); /*dim the background*/
position: relative;
z-index:999!important;
display: none;
width: 100%;
position: absolute;
}
.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;
z-index: 9999999;
}
.flexItem2>img{
width: 100%;z-index:99!important;
}
.flexItem:hover > .overlay-items {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
<div class="flexItem">
<div class="overlay-items"></div>
<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="overlay-items"></div>
<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="overlay-items"></div>
<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="overlay-items"></div>
<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>
好的,您可以使用after
伪元素来设置此样式。检查一下
$('.flexItem').hover(
function() {
$(this).addClass( 'overlay' );
}, function() {
$(this).removeClass( 'overlay' );
}
);
.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 {
/*dim the background*/
position: relative;
}
.overlay:after {
content: "";
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.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>