Javascript 2X2阴影图像_Javascript_Html_Css

Javascript 2X2阴影图像

javascript html css

Javascript 2X2阴影图像,javascript,html,css,Javascript,Html,Css,我正在尝试制作一个网页，当鼠标悬停在上面时，允许2x2的图像块遮住身体中的其他图像但由于某些原因，我无法使图像脱离它自己的div框 html, body { height: 100%; width: 100%; } div { width: 50%; height: 50%; float: left; position: relative; transition:

我正在尝试制作一个网页，当鼠标悬停在上面时，允许2x2的图像块遮住身体中的其他图像

但由于某些原因，我无法使图像脱离它自己的div框

html, body {
        height: 100%;
        width: 100%;
    }

    div {
        width: 50%;
        height: 50%;
        float: left;
        position: relative;
        transition: width 2s, height 4s;
        transition-delay: 2s;
    }
    div:hover {
            width: 100%;
            height: 100%}

    div:nth-of-type(1) {
        background: #ccc;
    }

    div:nth-of-type(2) {
        background: #bbb;
        border-left: 1px solid #f00;
    }

    div:nth-of-type(3) {
        background: #aaa;
        border-top: 1px solid #f00;
    }
    div:nth-of-type(4) {
        background: #ddd;
        border-top: 1px solid #f00;
        border-left: 1px solid #f00;
    }

    <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </body>

html，正文{
身高：100%；
宽度：100%；
}
div{
宽度：50%；
身高：50%；
浮动：左；
位置：相对位置；
过渡：宽度2s，高度4s；
过渡延迟：2s；
}
div:悬停{
宽度：100%；
身高：100%}
分区：第n个类型（1）{
背景：#ccc；
}
分区：第n个类型（2）{
背景:#bbb ;；
左边框：1px实心#f00；
}
分区：第n个类型（3）{
背景：#aaa；
边框顶部：1px实心#f00；
}
分区：第n个类型（4）{
背景：ddd；
边框顶部：1px实心#f00；
左边框：1px实心#f00；
}

您是否在寻找这样的效果：

正文{
高度：200px；
宽度：400px；
}
身体{
边框：1px纯黑；
}
div{
显示：内联块；
宽度：49%；
身高：25%；
位置：相对位置；
过渡：宽度2s，高度4s；
过渡延迟：2s；
}
div:悬停{
z指数：100；
宽度：100%；
身高：100%；
}
分区：第n个类型（1）{
背景：#eee；
}
分区：第n个类型（2）{
背景:#bbb ;；
}
分区：第n个类型（3）{
背景：#999；
}
分区：第n个类型（4）{
背景:#666；
}

如果我正确理解了您的问题，您正在研究一个悬停选项，它将在所有其他选项之上投射阴影层

如果是这样，有一个简单的技巧，使用

transform:scale（1）

和

box shadow

命令。就我个人而言，我更喜欢将所有图像插入到单独的div中，并为它们指定一个类

试试这个：

但我做到了，但它没有，将鼠标悬停在will box Shadow上，我想把它带到其他图片上。您可以使用灯箱。或者您可以使用javascript用悬停的图像填充父div（“容器”）