Question

我在div中有一个img。悬停时，图像上方应显示插入的框阴影，并且div中的文本也会放大。文本可以调整大小，但是不会显示阴影。它显示何时删除img，因此它只能出现在img下方。我怎样才能使它脱颖而出？

UTF-8

            .box {
                width:340px;
                height:200px;
                border: solid 4px rgba(54, 215, 183, 1); 
                margin:10px;
                position:relative;
                font-size:30px;
                text-align: bottom;
                transition: font 0.1s ease;
                z-index:1;
            }
            .box:hover{
                box-shadow:0px -20px 40px rgba(35, 203, 167, 1) inset;
                font-size:40px;
            }
            #tobaking img {
                margin-top:-40px;
                z-index:3;
            }

Answer 1

为父元素设置了框阴影，您将无法以任何好的方式在其子元素上方显示父元素。

所以我的方法是为阴影效果使用一个额外的div。当您在.box-element中使用相对位置时，我们可以在此处安全地使用position：absolute作为子元素。在下面的代码片段中，您可以找到我的方法以及带注释的解释。我还添加了一个小示例，以使带有z索引的父子问题更加清楚。

.box {
                width:340px;
                height:200px;
                border: solid 4px rgba(54, 215, 183, 1); 
                margin:10px;
                position:relative;
                font-size:30px;
                text-align: bottom;
                transition: font 0.1s ease;
            }
            /*Im not sure if there is a more efficient way but like this we need 2 rules for the hover - effect*/
            .box:hover .shadow{
                box-shadow:0px -20px 40px rgba(35, 203, 167, 1) inset;
            }
            .box:hover{
                font-size:40px;
            }
            #tobaking img {
                margin-top:-40px

            }
            .shadow {
              /*position absolute works because the .box element has position relative*/
              position: absolute;
              /*same position and size as the image*/
              margin-top:-40px;
              width: 350px;
              height: 300px;
              /*in case you want the image to be clickable etc. you need to disable pointer-events on the element thats laying on top*/
              pointer-events: none;
            }
            
            
            /*Example css, no matter how extreme we put the z-index, child Element is in front*/
            .parent {
              margin-top: 100px;
              width: 200px;
              height: 200px;
              background: red;
              z-index: 50;
            }
            .child{
              width: 200px;
              height: 200px;
              background: yellow;
              z-index: -50;
            }

<div class="box" id="tobaking">
        <!--New element above the img, so you dont need z-index-->
        <div class="shadow"></div>
        <img src="https://media1.giphy.com/media/13vSD7ajIJwgb6/source.gif">
        <span class="textspan">Straight to Baking!</span></div>
        
        
        <!--example for the parent-child problem-->
        <div class="parent">
          <div class="child">
          </div>
        </div>

使悬停的Div中的框阴影出现在图上

1 个答案: