css顺序导致java script实现手风琴特效出错,新手乐园,技术交流,鱼C论坛

ZhihanXing 发表于 2023-6-8 23:04:23

css顺序导致java script实现手风琴特效出错

以下代码目的是实现一个“手风琴”特效，当光标移至相应图片上方时，拉伸对应图片长度，其余图片缩短。光标移出图片时，所有图片恢复默认初始长度。但是.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.onmouseover = function() {
               for (let j = 0; j < lis.length; j++) {
                     lis.classList.add('all')
               }
               this.classList.add('active')
            }
            //这是鼠标移出效果
         lis.onmouseout = function() {
            for (let j = 0; j < lis.length; j++) {
               lis.classList.remove('all')
               lis.classList.remove('active')
            }
         }
   }
</script>
</body>

</html>

歌者文明清理员 发表于 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.onmouseover = function() {
               for (let j = 0; j < lis.length; j++) {
                     lis.classList.add('all')
               }
               this.classList.add('active')
            }
            //这是鼠标移出效果
         lis.onmouseout = function() {
            for (let j = 0; j < lis.length; j++) {
               lis.classList.remove('all')
               lis.classList.remove('active')
            }
         }
   }
</script>
</body>

</html>

isdkz 发表于 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.onmouseover = function() {
               for (let j = 0; j < lis.length; j++) {
                     lis.classList.add('all')
               }
               this.classList.add('active')
            }
            //这是鼠标移出效果
         lis.onmouseout = function() {
            for (let j = 0; j < lis.length; j++) {
               lis.classList.remove('all')
               lis.classList.remove('active')
            }
         }
   }
</script>
</body>

</html>

这样就能按期望的效果运行了。

歌者文明清理员 发表于 2023-6-8 23:09:25

isdkz 发表于 2023-6-8 23:07
在CSS中，如果有两个样式选择器冲突（例如，都想要设置同一个元素的同一个属性），那么优先级就会起作用。 ...

{:10_244:}

isdkz 发表于 2023-6-8 23:21:40

歌者文明清理员发表于 2023-6-8 23:09

{:10_324:}

歌者文明清理员 发表于 2023-6-8 23:29:28

isdkz 发表于 2023-6-8 23:21

果然还是不能用脚本，因为他不知道什么叫做“抢楼”{:10_256:}

页: [1]

鱼C论坛's Archiver

css顺序导致java script实现手风琴特效出错