Html 如何使长方体阴影显示在容器中的下一个元素上?
请参阅此代码: 在悬停显示两种类型的框阴影的最后一行中,第一个元素的阴影位于第二个元素下。只有第三个元素的阴影显示在第二个元素上Html 如何使长方体阴影显示在容器中的下一个元素上?,html,css,hover,flexbox,box-shadow,Html,Css,Hover,Flexbox,Box Shadow,请参阅此代码: 在悬停显示两种类型的框阴影的最后一行中,第一个元素的阴影位于第二个元素下。只有第三个元素的阴影显示在第二个元素上 我想我可以使用z-index,但是有没有办法确保所有的框阴影总是位于其他所有阴影之上?这与flexbox有关吗?只需将鼠标悬停时的位置添加到块位置:relative,并给他最大的z指数。 只需将z-index:1添加到。外部2:悬停。您不需要任何CSS定位。谢谢,将z-index:1添加到:hover非常有效。这实际上解决了我的很多问题。还在学习。 <d
我想我可以使用z-index,但是有没有办法确保所有的框阴影总是位于其他所有阴影之上?这与flexbox有关吗?只需将鼠标悬停时的位置添加到块
位置:relative
,并给他最大的z指数。
只需将
z-index:1
添加到。外部2:悬停
。您不需要任何CSS定位。谢谢,将z-index:1添加到:hover非常有效。这实际上解决了我的很多问题。还在学习。
<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>
$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;
}
}