如何将鼠标悬停在叠加上以在Flex容器中伸缩项目

时间：2018-09-24 12:23:01

标签： javascript jquery html css flexbox

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

5 个答案:

答案 0 :(得分：1)

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

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

答案 1 :(得分：0)

您在此处没有任何实际的“叠加层”，只是在设置class MyCollection extends ArrayObject { public function updateIndexes() { $this->exchangeArray(array_values($this->getArrayCopy())); } } 元素本身的背景。因此，当然，您要设置的背景色不会“叠加”图像，因为图像是元素的 content 和 background 好吧，在后面...

您可以简单地使用位于元素其余部分上方的伪元素来代替

： 

.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{
    
}

.

答案 2 :(得分：0)

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

答案 3 :(得分：0)

在所有其他解决方案中，您的链接都是不可单击的，这是完整的解决方案，其中灰色调光器覆盖图像，并提供您真正想要的实际效果。

<?php
   $sql = "insert into exercises (exercise, sets) values (" . mysqli_real_escape_string($exercise) . "," . mysqli_real_escape_string($_POST["sets"][$id]) .")";
?>

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

答案 4 :(得分：-1)

好的，您可以使用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>

相关问题
最新问题