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

最新推荐文章于 2022-09-25 11:25:29 发布

原创最新推荐文章于 2022-09-25 11:25:29 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #csdn #class

CSS 专栏收录该内容

10 篇文章

订阅专栏

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

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