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

本文探讨了CSS中使用:hover伪类实现元素悬停效果时遇到的问题,并提供了两种可行的解决方案,一种是为特定元素添加:hover伪类,另一种是引入新的类来确保:hover效果正常触发。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值