关于nth-child()伪类选择器选取元素设置transform样式但是无法通过hover改变transform的问题

欢迎来到Altaba的博客  2017年5月27日22:56:46

不多说，直接上问题代码

HTML部分：

<div class="photo-view box1">
        <img src="imagewall/images/full/10.jpg" alt=""/>
        <p>鸽子</p>
        <p>王阳阳毕设</p>
    </div>

    <div class="photo-view box2">
        <img src="imagewall/images/full/2.jpg" alt=""/>
        <p>院门</p>
        <p>王阳阳毕设</p>
    </div>

css部分：

 .photo-view:hover{
            box-shadow:15px 15px 20px rgba(50, 50, 50, 0.6);
            -webkit-transform:rotate(0deg) scale(1.20);
            -moz-transform:rotate(0deg) scale(1.20);
            transform:rotate(0deg) scale(1.20);
            color: tomato;
            z-index:2;
        }

        .photo-view:nth-child(1){
            top: 0px;
            left: 50px;
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            transform: rotate(30deg);
        }

上面的代码用浏览器打开，会发现hover悬浮transform部分无法触发，是两种选择器选择对象不统一，预估计是hover悬浮

换作下面这box2重新获取便可通过hover改变transform样式

.photo-view:hover{
            box-shadow:15px 15px 20px rgba(50, 50, 50, 0.6);
            -webkit-transform:rotate(0deg) scale(1.20);
            -moz-transform:rotate(0deg) scale(1.20);
            transform:rotate(0deg) scale(1.20);
            color: tomato;
            z-index:2;
        }

        .photo-view:nth-child(1){
            top: 0px;
            left: 50px;
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            transform: rotate(30deg);
        }

        .box2{
            top: 0px;
            left: 350px;
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            transform: rotate(10deg);
        }

或者改变一下hover前缀也可通过hover改变transform样式

.photo-view:nth-child(1):hover{
            box-shadow:15px 15px 20px rgba(50, 50, 50, 0.6);
            -webkit-transform:rotate(0deg) scale(1.20);
            -moz-transform:rotate(0deg) scale(1.20);
            transform:rotate(0deg) scale(1.20);
            color: tomato;
            z-index:2;
        }

        .photo-view:nth-child(1){
            top: 0px;
            left: 50px;
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            transform: rotate(30deg);
        }

便能够通过hover改变transform样式。