设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › 新手乐园 › css顺序导致java script实现手风琴特效出错
返回列表 发新帖
查看: 612|回复: 5

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

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

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

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

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

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         /* 初始化 */
  11.         
  12.         * {
  13.             margin: 0;
  14.             padding: 0;
  15.         }
  16.         
  17.         .box {
  18.             width: 1200px;
  19.             height: 400px;
  20.             margin: 50px auto;
  21.             overflow: hidden;
  22.         }
  23.         
  24.         li {
  25.             width: 240px;
  26.             height: 400px;
  27.             float: left;
  28.             overflow: hidden;
  29.             transition: all 1s;
  30.         }
  31.         
  32.         .active {
  33.             width: 800px;
  34.         }
  35.         
  36.         .all {
  37.             width: 100px;
  38.         }
  39.     </style>
  40. </head>

  42. <body>
  43.     <div class="box">
  44.         <ul>
  45.             <li>
  46.                 <a href=""><img src="images/1.jpg" alt=""></a>
  47.             </li>
  48.             <li>
  49.                 <a href=""><img src="images/2.jpg" alt=""></a>
  50.             </li>
  51.             <li>
  52.                 <a href=""><img src="images/3.jpg" alt=""></a>
  53.             </li>
  54.             <li>
  55.                 <a href=""><img src="images/4.jpg" alt=""></a>
  56.             </li>
  57.             <li>
  58.                 <a href=""><img src="images/5.jpg" alt=""></a>
  59.             </li>
  60.         </ul>
  61.     </div>
  62.     <script>
  63.         //获取对象
  64.         const lis = document.querySelectorAll('li')
  65.             //排他思想实现手风琴特效
  66.         for (let i = 0; i < lis.length; i++) {
  67.             //这是鼠标移入效果
  68.             lis[i].onmouseover = function() {
  69.                     for (let j = 0; j < lis.length; j++) {
  70.                         lis[j].classList.add('all')
  71.                     }
  72.                     this.classList.add('active')
  73.                 }
  74.                 //这是鼠标移出效果
  75.             lis[i].onmouseout = function() {
  76.                 for (let j = 0; j < lis.length; j++) {
  77.                     lis[j].classList.remove('all')
  78.                     lis[j].classList.remove('active')
  79.                 }
  80.             }
  81.         }
  82.     </script>
  83. </body>

  85. </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 。

以下是修正后的代码：

  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         /* 初始化 */
  11.         
  12.         * {
  13.             margin: 0;
  14.             padding: 0;
  15.         }
  16.         
  17.         .box {
  18.             width: 1200px;
  19.             height: 400px;
  20.             margin: 50px auto;
  21.             overflow: hidden;
  22.         }
  23.         
  24.         li {
  25.             width: 240px;
  26.             height: 400px;
  27.             float: left;
  28.             overflow: hidden;
  29.             transition: all 1s;
  30.         }
  31.         
  32.         .all {
  33.             width: 100px;
  34.         }

  36.         .active {
  37.             width: 800px;
  38.         }
  39.     </style>
  40. </head>

  42. <body>
  43.     <div class="box">
  44.         <ul>
  45.             <li>
  46.                 <a href=""><img src="images/1.jpg" alt=""></a>
  47.             </li>
  48.             <li>
  49.                 <a href=""><img src="images/2.jpg" alt=""></a>
  50.             </li>
  51.             <li>
  52.                 <a href=""><img src="images/3.jpg" alt=""></a>
  53.             </li>
  54.             <li>
  55.                 <a href=""><img src="images/4.jpg" alt=""></a>
  56.             </li>
  57.             <li>
  58.                 <a href=""><img src="images/5.jpg" alt=""></a>
  59.             </li>
  60.         </ul>
  61.     </div>
  62.     <script>
  63.         //获取对象
  64.         const lis = document.querySelectorAll('li')
  65.             //排他思想实现手风琴特效
  66.         for (let i = 0; i < lis.length; i++) {
  67.             //这是鼠标移入效果
  68.             lis[i].onmouseover = function() {
  69.                     for (let j = 0; j < lis.length; j++) {
  70.                         lis[j].classList.add('all')
  71.                     }
  72.                     this.classList.add('active')
  73.                 }
  74.                 //这是鼠标移出效果
  75.             lis[i].onmouseout = function() {
  76.                 for (let j = 0; j < lis.length; j++) {
  77.                     lis[j].classList.remove('all')
  78.                     lis[j].classList.remove('active')
  79.                 }
  80.             }
  81.         }
  82.     </script>
  83. </body>

  85. </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元素的前面，也可以正常展现手风琴效果了。
完整代码：
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         /* 初始化 */
  11.         
  12.         * {
  13.             margin: 0;
  14.             padding: 0;
  15.         }
  16.         
  17.         .box {
  18.             width: 1200px;
  19.             height: 400px;
  20.             margin: 50px auto;
  21.             overflow: hidden;
  22.         }
  23.         
  24.         li {
  25.             width: 240px;
  26.             height: 400px;
  27.             float: left;
  28.             overflow: hidden;
  29.             transition: all 1s;
  30.         }
  31.         
  32.         .active {
  33.             width: 800px;
  34.         }
  35.         
  36.         .all {
  37.             width: auto;
  38.         }
  39.     </style>
  40. </head>

  42. <body>
  43.     <div class="box">
  44.         <ul>
  45.             <li>
  46.                 <a href=""><img src="images/1.jpg" alt=""></a>
  47.             </li>
  48.             <li>
  49.                 <a href=""><img src="images/2.jpg" alt=""></a>
  50.             </li>
  51.             <li>
  52.                 <a href=""><img src="images/3.jpg" alt=""></a>
  53.             </li>
  54.             <li>
  55.                 <a href=""><img src="images/4.jpg" alt=""></a>
  56.             </li>
  57.             <li>
  58.                 <a href=""><img src="images/5.jpg" alt=""></a>
  59.             </li>
  60.         </ul>
  61.     </div>
  62.     <script>
  63.         //获取对象
  64.         const lis = document.querySelectorAll('li')
  65.             //排他思想实现手风琴特效
  66.         for (let i = 0; i < lis.length; i++) {
  67.             //这是鼠标移入效果
  68.             lis[i].onmouseover = function() {
  69.                     for (let j = 0; j < lis.length; j++) {
  70.                         lis[j].classList.add('all')
  71.                     }
  72.                     this.classList.add('active')
  73.                 }
  74.                 //这是鼠标移出效果
  75.             lis[i].onmouseout = function() {
  76.                 for (let j = 0; j < lis.length; j++) {
  77.                     lis[j].classList.remove('all')
  78.                     lis[j].classList.remove('active')
  79.                 }
  80.             }
  81.         }
  82.     </script>
  83. </body>

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

使用道具 举报

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 。

以下是修正后的代码：

  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         /* 初始化 */
  11.         
  12.         * {
  13.             margin: 0;
  14.             padding: 0;
  15.         }
  16.         
  17.         .box {
  18.             width: 1200px;
  19.             height: 400px;
  20.             margin: 50px auto;
  21.             overflow: hidden;
  22.         }
  23.         
  24.         li {
  25.             width: 240px;
  26.             height: 400px;
  27.             float: left;
  28.             overflow: hidden;
  29.             transition: all 1s;
  30.         }
  31.         
  32.         .all {
  33.             width: 100px;
  34.         }

  36.         .active {
  37.             width: 800px;
  38.         }
  39.     </style>
  40. </head>

  42. <body>
  43.     <div class="box">
  44.         <ul>
  45.             <li>
  46.                 <a href=""><img src="images/1.jpg" alt=""></a>
  47.             </li>
  48.             <li>
  49.                 <a href=""><img src="images/2.jpg" alt=""></a>
  50.             </li>
  51.             <li>
  52.                 <a href=""><img src="images/3.jpg" alt=""></a>
  53.             </li>
  54.             <li>
  55.                 <a href=""><img src="images/4.jpg" alt=""></a>
  56.             </li>
  57.             <li>
  58.                 <a href=""><img src="images/5.jpg" alt=""></a>
  59.             </li>
  60.         </ul>
  61.     </div>
  62.     <script>
  63.         //获取对象
  64.         const lis = document.querySelectorAll('li')
  65.             //排他思想实现手风琴特效
  66.         for (let i = 0; i < lis.length; i++) {
  67.             //这是鼠标移入效果
  68.             lis[i].onmouseover = function() {
  69.                     for (let j = 0; j < lis.length; j++) {
  70.                         lis[j].classList.add('all')
  71.                     }
  72.                     this.classList.add('active')
  73.                 }
  74.                 //这是鼠标移出效果
  75.             lis[i].onmouseout = function() {
  76.                 for (let j = 0; j < lis.length; j++) {
  77.                     lis[j].classList.remove('all')
  78.                     lis[j].classList.remove('active')
  79.                 }
  80.             }
  81.         }
  82.     </script>
  83. </body>

  85. </html>
复制代码

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

使用道具 举报

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

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

使用道具 举报

isdkz
发表于 2023-6-8 23:21:40 | 显示全部楼层
歌者文明清理员 发表于 2023-6-8 23:09

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

使用道具 举报

歌者文明清理员
发表于 2023-6-8 23:29:28 | 显示全部楼层
isdkz 发表于 2023-6-8 23:21

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

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-4-23 22:06

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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