如何在容器中的下一個元素上進行陰影顯示？

請參閱此代碼：http://codepen.io/Varin/pen/kkGgVd 如何在容器中的下一個元素上進行陰影顯示？

<div class="container"> 
     <div class="outside2"> 
     <div class="inside2"> 
      <span class="text"></span> 
     </div> 
     </div> 
     <div class="outside2"> 
     <div class="inside2"> 
      <span class="text"></span> 
     </div> 
     </div> 
     <div class="outside2"> 
     <div class="inside2"> 
      <span class="text"></span> 
     </div> 
     </div> 
    </div>

和CSS

$color1 : rgba(123,223,12,0.66); 
$color2 : rgba(23,43,122,0.66); 

body { 
    box-sizing: border-box; 
    background-color: #222222; 
    display:flex; 
    flex-direction:column; 
    justify-content: center; 
    align-items: center; 
    //height: 100vh; 
    font-family: 'Josefin Sans', sans-serif; 
    font-weight: 400; 
} 

.container { 
    display:flex; 
} 

.text:after { 
    content: 'Some info about the product and features, the history of the company lorem ipsum and so on.'; 
} 
.outside2 { 
    margin: 10px; 
    box-sizing: border-box; 
    padding: 10px; 
    display:flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    background: url(https://image.freepik.com/free-vector/wavy-letter-v-logo-in-abstract-style_1017-1976.jpg); 
    background-position: center center; 
    background-size: cover; 
    height: 200px; 
    width: 200px; 
    border: solid 0px rgba(0,0,0,0.4); 
    transition-duration: 0.5s; 
    &:hover { 
    box-shadow: inset 0px 0px 101px 100px $color1, 0px 0px 201px 56px $color1; 
    .text { 
     opacity:1; 
     transition-delay: 0.2s; 
    } 
    } 
    .text { 
    color: #fff; 
    opacity:0; 
    transition-duration: 0.5s; 
    transition-delay: 0.1s; 
    } 
}

在這兩種類型的盒子陰影顯示在懸停的最後一排，1號元素的影子是第二個元素。只有第三個元素的陰影顯示在第二個元素上。

我想我可以玩z-index，但是有沒有辦法確保所有的盒子陰影總是在其他任何東西之上？這與Flexbox有關嗎？

來源

2016-10-01 Varin

只需將'z-index：1'添加到'.outside2：hover'。你不需要任何CSS定位。 –

謝謝，添加z-index：1：hover效果很好。這實際上解決了我的很多問題。仍在學習。 – Varin

只需將您的區塊position: relative添加到懸停並給他最大的z-索引。 JsFiddle link

來源

2016-10-01 17:08:54

如何在容器中的下一個元素上進行陰影顯示？

回答

相關問題