image.png 未移入前
    image.png鼠标悬停到Item3时的效果

    原理：
    利用的鼠标移入到这个块级(父级)时，该块级有一个的:hover选择器，再用not排队其子元素中选择器:hover的元素。

    1. <div class="sibling-fade">
    2.   <span>Item 1</span>
    3.   <span>Item 2</span>
    4.   <span>Item 3</span>
    5.   <span>Item 4</span>
    6.   <span>Item 5</span>
    7.   <span>Item 6</span>
    8. </div>
    1. span {
    2.   padding: 0 1rem;
    3.   transition: opacity 0.2s;
    4. }
    5. .sibling-fade:hover span:not(:hover) {
    6.   opacity: 0.5;
    7. }

    同样的，利用:hover选择器与CSS3的transform属性可以实现很多好看的效果出来。

    特别注意：行内元素设置transform属性无效，需要把行内元素改变成行内块元素才行，如下：

    1. * {
    2. transition:All 0.4s ease-in-out;
    3. -webkit-transition:All 0.4s ease-in-out;
    4. -moz-transition:All 0.4s ease-in-out;
    5. -o-transition:All 0.4s ease-in-out;
    6. cursor: pointer;
    7. }
    9. span{display: inline-block;}  //关键代码，行内元素改成行内块元素
    11. .sibling-fade:hover span:not(:hover){
    12. transform:rotate(360deg) scale(1.2);
    13. -webkit-transform:rotate(360deg) scale(1.2);
    14. -moz-transform:rotate(360deg) scale(1.2);
    15. -o-transform:rotate(360deg) scale(1.2);
    16. -ms-transform:rotate(360deg) scale(1.2);
    17. }