android css shadow 不显示 css效果不显示

一、CSS-鼠标hover之后transform不显示原因

本人在实际写代码中遇到的问题之一：transform不显示效果

原因之一： :hover之后选择器书写不符合规范

例如：

1.首先，构建一个大盒子.box，大盒子子级标签为ul嵌套的li标签，再嵌套一个a标签（便于后续内容全部区域附带跳转效果），a标签嵌套一个.pic的盒子，盒子内部再嵌套一个img标签。（之所以嵌套这么多，方便后续讲解为什么：hover容易出错），标签结构代码如下图所示：

2.在谷歌浏览器中加载如下图：

3.盒子以及其他标签的样式这里就不给出了，比较简单；接下来给li标签加一个hover效果，使其鼠标移入li 范围时，图片整体变大 。

根据目的，先写上CSS样式代码以及在浏览器中显示效果截图：

很明显，img标签是没有发生任何变化，也就是transform是没有生效的；当把：hover之后的标签选择方式更改后：如下图：（两个选择器器都能准确地指定img标签进行hover）

效果图：

很明显img标签放大了，也就是transform属性生效。

**原因分析：**对比两个选择器：发现只有只有 ：hover只有.box 与. pic不同，导致的结果就不一样，一个显示hover效果，一个不显示。原因在于：我们目的是：鼠标移入li 标签时有hover效果，所以 hover之后出现的选择器必须是li 的子元素，例如.pic 就是li的子代元素，而.box不是 li 标签的子代元素 ，也就无法有hover效果！

二、总结

hover之后的选择器 必须是 鼠标移入将要发生hover效果的那个标签的子代元素，如上图所示。

.pic 就是li的子代元素，所以hover效果能实现，而.box不是 li 标签的子代元素，是它的父辈元素 ，也就无法有hover效果！