关于鼠标移到父级，子级图片渐变成其他图片.

（1）我第一个用的是onmouseout和onmouseover,但是这个只能实现鼠标移到图片时切换，且不能控制切换的速度（或许我没找到方法）。（HTML代码如下）

<img src="images/good1.1.png" οnmοuseοut="this.src='images/good1.1.png" οnmοuseοver="this.src='images/good1.2.png">

 

（2）然后我又找到了hover事件中transition属性可以控制切换速度，想起了display:none样式可以隐藏元素且不占用位置，就想用transition控制display属性：如下：

(HTML代码如下):

<div class="goodness">

<img src="images/good2.1.png" class="photo1">

<img src="images/good2.2.png" class="photo2">

</div>

css为：

.photo2{display:none;}

.photo1{display:inline;}

.goodness:hover .photo1{display:none; transition: display 1s;}

.goodness:hover .photo2{display:inline; transition: display 1s;}

但是图片可以切换，但是还是是瞬间切换。

后来发现transition不支持display属性。。。

 

（3）我又了解到opacity属性（控制透明度，可以被hover支持），就想用opacity和display:none来控制图片切换，但是没有达到预期效果，最后看到一句话：position：absolute属性用于隐藏属性，实现重叠遮挡。然后我选择了绝对定位。。

css如下：

.photo2{ opacity: 0;}

.photo1{opacity: 1;}

.goodness:hover .photo2{ opacity: 1;transition: opacity 1s;}

.goodness:hover .photo1{ opacity: 0; transition: opacity 1s;}

.goodness img{position: absolute;}