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. }
    8. span{display: inline-block;} //关键代码,行内元素改成行内块元素
    9. .sibling-fade:hover span:not(:hover){
    10. transform:rotate(360deg) scale(1.2);
    11. -webkit-transform:rotate(360deg) scale(1.2);
    12. -moz-transform:rotate(360deg) scale(1.2);
    13. -o-transform:rotate(360deg) scale(1.2);
    14. -ms-transform:rotate(360deg) scale(1.2);
    15. }