make css：hover只影响父元素

有一个纯粹的CSS解决方案(事实上甚至两个),但两者都需要付出代价.

>您可以添加指针事件：无;对你的孩子元素 – 但它也不会响应它自己的悬停样式.不幸的是,在版本11(http://caniuse.com/#search=pointer-events)以下的IE中不支持Pointer-events.
>将父元素的内容(除了定位子元素)包装在另一个元素中(这就是此方法的成本)并将悬停样式应用于此包装器.

两种方法的示例here.

@H_450_15@.parent-2,.parent { position:relative; BACkground:#ddd; width:100px; height:100px; } .parent:hover { BACkground:blue; } .child { position:absolute; top:0; left:130px; width:100px; height:50px; border:1px solid blue; pointer-events:none; } /* doesn't work in opera and ie */ .content { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;} .content:hover { BACkground:blue; }