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

来源：互联网发布：java cms垃圾回收编辑：程序博客网时间：2024/06/07 06:15

欢迎来到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样式。

阅读全文

0 0