如何将叠加层悬停在flex容器中的flex项目上答案

【问题标题】：How to put overlay on hover to flex item in flex container如何将叠加层悬停在flex容器中的flex项目上
【发布时间】：2019-02-27 23:09:20
【问题描述】：

这是我的代码。我想将灰色叠加层覆盖在每个 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>

【问题讨论】：

您可以将z-index添加到<img>标签和.overlay类中。
我这里的代码也做了，不行
查看我的答案！！

标签： javascript jquery html css flexbox

【解决方案1】：

在所有其他解决方案中，您的链接不可点击，这是完整的解决方案，灰色调光器会覆盖图像并给出您想要的实际效果。

$(".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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>

【讨论】：

【解决方案2】：

您可以使用以下更新的代码：

$('.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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>

【讨论】：

【解决方案3】：

您需要将叠加层定义为.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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>

【讨论】：

【解决方案4】：

您在这里没有任何实际的“叠加层”，您只是在设置 .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 &amp; 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 &amp; 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 &amp; 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 &amp; 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，但可以纯粹在 CSS 中完成。）

【解决方案5】：

好的，你可以使用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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>

【讨论】：

我不能隐藏它，我必须在这里改变不透明度，而是给它涂上颜色。