鱼C论坛

 找回密码
 立即注册
查看: 909|回复: 5

[已解决]css顺序导致java script实现手风琴特效出错

[复制链接]
发表于 2023-6-8 23:04:23 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
以下代码目的是实现一个“手风琴”特效,当光标移至相应图片上方时,拉伸对应图片长度,其余图片缩短。光标移出图片时,所有图片恢复默认初始长度。但是.active在.all上方时,效果就不会展现出如期效果,而是只会缩短所有图片,请问是为什么?
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 初始化 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 1200px;
            height: 400px;
            margin: 50px auto;
            overflow: hidden;
        }
        
        li {
            width: 240px;
            height: 400px;
            float: left;
            overflow: hidden;
            transition: all 1s;
        }
        
        .active {
            width: 800px;
        }
        
        .all {
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href=""><img src="images/1.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/2.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/3.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/4.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/5.jpg" alt=""></a>
            </li>
        </ul>
    </div>
    <script>
        //获取对象
        const lis = document.querySelectorAll('li')
            //排他思想实现手风琴特效
        for (let i = 0; i < lis.length; i++) {
            //这是鼠标移入效果
            lis[i].onmouseover = function() {
                    for (let j = 0; j < lis.length; j++) {
                        lis[j].classList.add('all')
                    }
                    this.classList.add('active')
                }
                //这是鼠标移出效果
            lis[i].onmouseout = function() {
                for (let j = 0; j < lis.length; j++) {
                    lis[j].classList.remove('all')
                    lis[j].classList.remove('active')
                }
            }
        }
    </script>
</body>

</html>
最佳答案
2023-6-8 23:07:12
在CSS中,如果有两个样式选择器冲突(例如,都想要设置同一个元素的同一个属性),那么优先级就会起作用。优先级的计算方式相对复杂,包括了选择器的类型、特异性(specificity)以及源顺序等因素。

在你的代码中, .active  和  .all  两个类同时添加到了同一个  li  元素上,且都试图设置  li  元素的  width  属性,这就产生了冲突。在这种情况下,会依据优先级规则来决定哪个类的  width  属性应该被使用。

而在CSS中,当两个选择器的特异性(specificity)相同时,将会优先使用在CSS中后出现的规则,即源顺序原则。在你的代码中,  .all  选择器在  .active  选择器之后,因此, .all  的  width  属性会覆盖  .active  的  width  属性。

为了解决这个问题,你可以:

1. 改变CSS规则的顺序,将  .active  选择器放在  .all  选择器之后。
2. 你也可以通过增加  .active  的特异性来覆盖  .all ,例如,改变  .active  为  .box .active 。

以下是修正后的代码:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 初始化 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 1200px;
            height: 400px;
            margin: 50px auto;
            overflow: hidden;
        }
        
        li {
            width: 240px;
            height: 400px;
            float: left;
            overflow: hidden;
            transition: all 1s;
        }
        
        .all {
            width: 100px;
        }

        .active {
            width: 800px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href=""><img src="images/1.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/2.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/3.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/4.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/5.jpg" alt=""></a>
            </li>
        </ul>
    </div>
    <script>
        //获取对象
        const lis = document.querySelectorAll('li')
            //排他思想实现手风琴特效
        for (let i = 0; i < lis.length; i++) {
            //这是鼠标移入效果
            lis[i].onmouseover = function() {
                    for (let j = 0; j < lis.length; j++) {
                        lis[j].classList.add('all')
                    }
                    this.classList.add('active')
                }
                //这是鼠标移出效果
            lis[i].onmouseout = function() {
                for (let j = 0; j < lis.length; j++) {
                    lis[j].classList.remove('all')
                    lis[j].classList.remove('active')
                }
            }
        }
    </script>
</body>

</html>
这样就能按期望的效果运行了。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2023-6-8 23:05:08 | 显示全部楼层
本帖最后由 歌者文明清理员 于 2023-6-8 23:06 编辑

.active类设置的是宽度为800px,而.all类设置的是宽度为100px,所以当.active类在所有li元素的前面时,鼠标移入时会先给所有li元素添加.all类,导致它们的宽度都变成了100px,接下来再给当前li元素添加.active类,此时的宽度变成了800px,但其他li元素的宽度仍为100px,因而整个效果就不太自然了。如果.active类在所有li元素的后面,就没有这个问题了,因为当鼠标移入时,首先就会先给当前li元素添加.active类,所以它的宽度会变成800px,而其他li元素的宽度也会根据.all类的设置发生相应变化,整个效果才更加符合预期。

你可以将.all类的宽度设置为auto,这样当.active在所有li元素的前面时,所有li元素的宽度都会恢复原来的宽度,而不是强制变成100px,从而实现更加自然的手风琴效果。代码如下所示:

.all {
  width: auto;
}
这样修改之后,即使.active类在所有li元素的前面,也可以正常展现手风琴效果了。
完整代码:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 初始化 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 1200px;
            height: 400px;
            margin: 50px auto;
            overflow: hidden;
        }
        
        li {
            width: 240px;
            height: 400px;
            float: left;
            overflow: hidden;
            transition: all 1s;
        }
        
        .active {
            width: 800px;
        }
        
        .all {
            width: auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href=""><img src="images/1.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/2.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/3.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/4.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/5.jpg" alt=""></a>
            </li>
        </ul>
    </div>
    <script>
        //获取对象
        const lis = document.querySelectorAll('li')
            //排他思想实现手风琴特效
        for (let i = 0; i < lis.length; i++) {
            //这是鼠标移入效果
            lis[i].onmouseover = function() {
                    for (let j = 0; j < lis.length; j++) {
                        lis[j].classList.add('all')
                    }
                    this.classList.add('active')
                }
                //这是鼠标移出效果
            lis[i].onmouseout = function() {
                for (let j = 0; j < lis.length; j++) {
                    lis[j].classList.remove('all')
                    lis[j].classList.remove('active')
                }
            }
        }
    </script>
</body>

</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-8 23:07:12 | 显示全部楼层    本楼为最佳答案   
在CSS中,如果有两个样式选择器冲突(例如,都想要设置同一个元素的同一个属性),那么优先级就会起作用。优先级的计算方式相对复杂,包括了选择器的类型、特异性(specificity)以及源顺序等因素。

在你的代码中, .active  和  .all  两个类同时添加到了同一个  li  元素上,且都试图设置  li  元素的  width  属性,这就产生了冲突。在这种情况下,会依据优先级规则来决定哪个类的  width  属性应该被使用。

而在CSS中,当两个选择器的特异性(specificity)相同时,将会优先使用在CSS中后出现的规则,即源顺序原则。在你的代码中,  .all  选择器在  .active  选择器之后,因此, .all  的  width  属性会覆盖  .active  的  width  属性。

为了解决这个问题,你可以:

1. 改变CSS规则的顺序,将  .active  选择器放在  .all  选择器之后。
2. 你也可以通过增加  .active  的特异性来覆盖  .all ,例如,改变  .active  为  .box .active 。

以下是修正后的代码:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 初始化 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 1200px;
            height: 400px;
            margin: 50px auto;
            overflow: hidden;
        }
        
        li {
            width: 240px;
            height: 400px;
            float: left;
            overflow: hidden;
            transition: all 1s;
        }
        
        .all {
            width: 100px;
        }

        .active {
            width: 800px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href=""><img src="images/1.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/2.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/3.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/4.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/5.jpg" alt=""></a>
            </li>
        </ul>
    </div>
    <script>
        //获取对象
        const lis = document.querySelectorAll('li')
            //排他思想实现手风琴特效
        for (let i = 0; i < lis.length; i++) {
            //这是鼠标移入效果
            lis[i].onmouseover = function() {
                    for (let j = 0; j < lis.length; j++) {
                        lis[j].classList.add('all')
                    }
                    this.classList.add('active')
                }
                //这是鼠标移出效果
            lis[i].onmouseout = function() {
                for (let j = 0; j < lis.length; j++) {
                    lis[j].classList.remove('all')
                    lis[j].classList.remove('active')
                }
            }
        }
    </script>
</body>

</html>
这样就能按期望的效果运行了。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-8 23:09:25 | 显示全部楼层
isdkz 发表于 2023-6-8 23:07
在CSS中,如果有两个样式选择器冲突(例如,都想要设置同一个元素的同一个属性),那么优先级就会起作用。 ...

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-8 23:21:40 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-8 23:29:28 | 显示全部楼层

果然还是不能用脚本,因为他不知道什么叫做“抢楼”
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 17:18

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表