html删除子元素无效,html – 缩放父元素,但删除子元素的缩放

.scale:hover .dont-scale {} run after .scale:hover {},so scale(1) Measure than scale(2),for this reason child will be scaled same parent.

试试这个 ：

.scale:hover .dont-scale{

-webkit-transform : scale(0.5);

transform : scale(0.5);

}

To avoid margins issue:

.dont-scale{

-webkit-transform-origin : top left;

-webkit-transition: transform 0.3s linear;

}

.scale {

max-width : 200px;

height : 200px;

background-color : beige;

-webkit-transition: transform 0.3s linear;

-webkit-transform-origin : top left;

transition: transform 0.3s linear;

transform-origin : top left;

}

.dont-scale{

-webkit-transform-origin : top left;

-webkit-transition: transform 0.3s linear;

transform-origin : top left;

transition: transform 0.3s linear;

}

.scale:hover {

-webkit-transform : scale(2.0);

-webkit-transition: transform 0.3s linear;

transform : scale(2.0);

transition: transform 0.3s linear;

}

.scale:hover .dont-scale{

-webkit-transform : scale(0.5);

transform : scale(0.5);

}

• Item 1
• Item 2
• Item 3