html - 悬停在每个其他元素上时深色叠加

标签 html css flexbox

现在，我正尝试在悬停时向这些元素添加深色叠加层。它完成了它的工作，但是它也覆盖了悬停状态图像。它也不会恢复，因为覆盖 div 覆盖了整个容器。期望的效果是让每个元素都覆盖一层，展开的元素除外。

https://codepen.io/SteveGWR/pen/NaZJyp 

<div class="container">

<ul class="grid-list">
  <li class="bath">
    <div class="dark-cover"></div>
    <div class="destination-title">Bath</div>
      <a href="#"><div class="cta-bath">Click Here</div></a>
      <div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="destination-copy"><span>Bath ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>

  <li class="bristol">
    <div class="destination-title">Bristol</div>
      <a href="#"><div class="cta-bath">Click Here</div></a>
      <div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="destination-copy"><span>Bristol ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>

  <li class="cardiff">
    <div class="destination-title">Cardiff</div>
      <a href="#"><div class="cta-bath">Click Here</div></a>
      <div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="destination-copy"><span>Cardiff ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>

  <li class="cornwall">
    <div class="destination-title">Cornwall</div>
    <a href="#"><div class="cta-bath">Click Here</div></a>
    <div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="destination-copy"><span>Cornwall ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>
</ul>  

<!-- row 2 -->

<ul class="grid-list">
  <li class="dorset">
    <div class="destination-title">Dorset</div>
    <div class="destination-copy"><span>Dorset ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>



  <li class="Cotswolds">
    <div class="destination-title">Cotswolds</div>
    <div class="destination-copy"><span>Cotswolds ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>

  <li class="Exeter">
    <div class="destination-title">Exeter</div>
    <div class="destination-copy"><span>Exeter ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>


  <li class="London">
    <div class="destination-title">London</div>
    <div class="destination-copy"><span>London ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>  

</ul>

最佳答案 

    Update Your code like this 
    <style>
* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
}


.grid-list{
width:100%;
float:left;
}
.grid-list li{
    width:25%;
float:left;
position:relative;
height:200px;
}
.grid-list li .dark-cover{ display:none; position:absolute; background:rgba(0,0,0,0.7); width:100%; height:100%; left:0px; top:0px;  }
.container:hover .dark-cover{ display:block;}

.container {

    position: relative;
    left: 50%;
    margin-left: -475px;
/*    background: #FF4346;*/
        max-width: 950px;
    width: 100%;
    top: 20px;
    height: 748px;


}

.grid-list {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 190px;
}
.grid-list li {
  position:relative;
  height:100%;

}

.destination-copy {
  display:none;
  opacity:0;
  transition:1s all;
  position:absolute;
  bottom:0px;
  width:100%;
  background:rgba(0,0,0,0.7);
  color:#fff;
  padding:12px;
  font-size: 13px;
  font-family: arial;
}

.cta-bath {
       display: none;
    opacity: 0;
    transition: 1s all;
    position: absolute;
    bottom: 80px;
    right: 110px;
    background: #FFFFFF;
    border: 2px solid #013A04;
    border-radius: 3px;
    color: #0a493e;
    padding: 6px 15px 6px 15px;
    /* line-height: normal; */
    font-size: 13px;
    font-weight: bold;
    font-family: arial;

}


.promo-content {

     display:none;
  opacity:0;
  transition:1s all;
  position:absolute;
  top:40px;
  width:300px;
  background:rgba(0,0,0,0.7);
  color:#fff;
  padding:12px;
  font-size: 13px;
  font-family: arial;

}


.promo-content h3 {
  color:#fff;
  font-size: 16px;
  font-weight: bold;
  font-family: arial;

}




.grid-list li:hover .destination-copy {
  animation: 1s ease 0s normal forwards 1 fadein;
  display:block;
}



.grid-list li:hover .cta-bath {
  animation: 1.7s ease 0s normal forwards 1 fadein;
  display:block;
}


.grid-list li:hover .promo-content {
  animation: 2.7s ease 0s normal forwards 1 fadein;
  display:block;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

.grid-list li {
    transition: width 0.5s, height 0.5s;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 25%; /*CHANGE*/

    /* min-width: 237px; */
    /* margin: 1em; */
    /* flex-wrap: wrap; */
    list-style: none;
}

.grid-list li:hover {
  width:75%;
  height:158%;
  z-index: 10;
}

.destination-title {
  position:absolute;
  bottom:80px;
  right:0px;
  background-color:#054940;
  color:#fff;
  font-size:16px;
  font-weight: bold;
  padding:6px;
  width: 100px;
  text-align: center;
}

/* Background images */
.bath {
  background-image:url(http://placekitten.com/600/350);  
}
.bath:hover {
  background-image: url(http://placekitten.com/600/350);

}

.bristol {
  background-image: url(http://placekitten.com/600/355);
}
.bristol:hover {
  background-image: url(http://placekitten.com/600/355);
}

.cardiff {
  background-image:url(http://placekitten.com/600/356);
}
.cardiff:hover {
  background-image:url(http://placekitten.com/600/356);
}

.cornwall {
  background-image:url(http://placekitten.com/600/357);
    clear: right;
}
.cornwall:hover {
  background-image:url(http://placekitten.com/600/357);
}

.dorset {
  background-image:url(http://placekitten.com/600/359);

}
.dorset:hover {
  background-image:url(http://placekitten.com/600/359);
}


.Cotswolds {
  background-image:url(http://placekitten.com/600/365);

}
.Cotswolds:hover {
  background-image:url(http://placekitten.com/600/365);
}


.Exeter {
  background-image:url(http://placekitten.com/600/366);

}
.Exeter:hover {
  background-image:url(http://placekitten.com/600/366);
}


.London {
  background-image:url(http://placekitten.com/600/367);

}
.London:hover {
  background-image:url(http://placekitten.com/600/367);
}

.overlay-in .dark-cover{ display:none!important; }

    </style>



    <div class="container">

<ul class="grid-list">

  <li class="bath">
     <div class="dark-cover"></div>
    <div class="destination-title">Bath</div>
      <a href="#"><div class="cta-bath">Click Here</div></a>
      <div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="destination-copy"><span>Bath ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>

  <li class="bristol">
     <div class="dark-cover"></div>
    <div class="destination-title">Bristol</div>
      <a href="#"><div class="cta-bath">Click Here</div></a>
      <div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="destination-copy"><span>Bristol ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>

  <li class="cardiff">
     <div class="dark-cover"></div>
    <div class="destination-title">Cardiff</div>
      <a href="#"><div class="cta-bath">Click Here</div></a>
      <div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="destination-copy"><span>Cardiff ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>

  <li class="cornwall">
     <div class="dark-cover"></div>
    <div class="destination-title">Cornwall</div>
    <a href="#"><div class="cta-bath">Click Here</div></a>
    <div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="destination-copy"><span>Cornwall ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>
</ul>  

<!-- row 2 -->

<ul class="grid-list">
  <li class="dorset">
  <div class="dark-cover"></div>
    <div class="destination-title">Dorset</div>
    <div class="destination-copy"><span>Dorset ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>



  <li class="Cotswolds">
  <div class="dark-cover"></div>
    <div class="destination-title">Cotswolds</div>
    <div class="destination-copy"><span>Cotswolds ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>

  <li class="Exeter">
  <div class="dark-cover"></div>
    <div class="destination-title">Exeter</div>
    <div class="destination-copy"><span>Exeter ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>


  <li class="London">
  <div class="dark-cover"></div>
    <div class="destination-title">London</div>
    <div class="destination-copy"><span>London ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
  </li>  

</ul>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>
        jQuery("li").mouseover(function(){
            jQuery(this).addClass("overlay-in");
        });
        jQuery("li").mouseleave(function(){
            jQuery(this).removeClass("overlay-in");
        });
    </script>

关于html - 悬停在每个其他元素上时深色叠加，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47092491/

上一篇：html - 在窗口最小化时使用媒体查询调整页面大小

下一篇：html - 我想为这个标志制作动画，但由于某种原因它不起作用

相关文章：

html - 链接在移动响应式代码点火器中不起作用

html - 当我添加 Bootstrap 样式表时，我的左上角 png 变得不可见

css - Dojo Dgrid - 使用 block 中的剩余空间

html - 使用 Flexbox 时，子 div 高度应等于其父级高度

css - Bootstrap 4 和多个元素的高度

javascript - 将元素定位在图像元素上，但图像随窗口改变大小

css - 将 div 放在另一个 div 中？

javascript - 如何正确居中手持台

css - 如何更改 IE 所需元素的默认样式？

html - 为什么 flex-direction : row only work when I set the element to display: inline-block?

©2024 IT工具网  联系我们