嵌套div可以忽略父项的悬停

Question

如果div嵌套在另一个div内，嵌套div可以忽略父项的悬停。这里有一个例子

.Box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
} 
 

 
.Circle { 
 
    width: 20px; 
 
    height: 20px; 
 
    background: blue; 
 
    border-radius: 20px; 
 
} 
 

 
.Box:hover { 
 
    animation: expand .5s normal forwards; 
 
} 
 

 
@keyframes expand { 
 
    0% { 
 
    transform: scale(1); 
 
    } 
 
    100% { 
 
    transform: scale(1.6); 
 
    } 
 
}

<div class="Box"> 
 
    <div class="Circle"></div> 
 
</div>

在这个例子中会有一个方法，使箱扩张，但不是圈

Answer 1

技术上父hover事件不会被应用到子。

但在你的情况下，孩子仍然受到影响，因为你正在缩放父母。因此，父母的一切都在缩小。

为了对抗嵌套div的缩放比例，可以在父级div悬停时应用反转缩放效果。

.Box{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
} 
 

 
.Circle{ 
 
    width: 20px; 
 
    height: 20px; 
 
    background: blue; 
 
    border-radius: 20px; 
 
} 
 

 
.Box:hover{ 
 
    animation: expand .5s normal forwards; 
 
} 
 

 
.Box:hover .Circle { 
 
    animation: contract .5s normal forwards; 
 
} 
 

 
@keyframes expand { 
 
    0% { 
 
     transform: scale(1); 
 
    } 
 

 
    100% { 
 
     transform: scale(1.6); 
 
    } 
 
} 
 

 
@keyframes contract { 
 
    0% { 
 
     transform: scale(1); 
 
    } 
 

 
    100% { 
 
     transform: scale(0.625); /* 1/1.6 */ 
 
    } 
 
}

<div class="Box"> 
 
    <div class="Circle"></div> 
 
</div>

Answer 2

因为你是缩放父，这里的一切都将受到影响。另一种解决方案是与圈子有不同的兄弟姐妹并在其上应用动画。

CSS：

.Box { 
    width: 50px; 
    height: 50px; 
    background: red; 
    } 

    .Circle { 
    width: 20px; 
    height: 20px; 
    background: blue; 
    border-radius: 20px; 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    } 

    .Container { 
    position: relative; 
    } 

    .Box:hover { 
    animation: expand .5s normal forwards; 
    } 

    @keyframes expand { 
    0% { 
     transform: scale(1); 
    } 
    100% { 
     transform: scale(1.6); 
    } 
    } 

HTML：

<div class="Container"> 
    <div class="Box"> 

    </div> 
    <div class="Circle"></div> 
</div> 

演示：http://jsfiddle.net/lotusgodkk/GCu2D/2157/

这里，圆的定位使得它的位置不受框