Html 在悬停状态下增加导航项的宽度

每当您将鼠标悬停在导航栏上时，它都会扩展悬停链接的宽度。目前什么都没有发生

• .p1

  是导航菜单中的单词

• .nav

  s是仅围绕单个单词菜单的框，

  .container

  是nav容器

这是我的密码：

h1{
文本对齐：居中；
背景：url（wallpaper.png）；
颜色：白色；
宽度：自动；
高度：125px；
}
身体{
背景：url（391336.jpg）；
}
#容器{
背景：黑色；
背景：url（wallpaper.png）；
高度：100px；
宽度：自动；
过渡：全部5秒，轻松进退0秒；
}
.导航1{
浮动：左；
位置：相对位置；
保证金：自动；
边界：0；
高度：100px；
宽度：150px；
背景：#B201F5；
颜色：白色；
字体大小：30px；
转换：所有.2输入输出0；
}
.导航2{
浮动：左；
位置：相对位置；
保证金：自动；
边界：0；
高度：100px；
宽度：150px；
背景：FF8600；
颜色：白色；
字体大小：30px；
转换：所有.2输入输出0；
}
.导航3{
浮动：左；
位置：相对位置；
保证金：自动；
边界：0；
高度：100px；
宽度：150px；
背景#FD0017；
颜色：白色；
字体大小：30px；
转换：所有.2输入输出0；
}
.nav4{
浮动：左；
位置：相对位置；
保证金：自动；
边界：0；
高度：100px；
宽度：150px；
背景#09EB00；
颜色：白色；
字体大小：30px；
转换：所有.2输入输出0；
}
.p1{
字体系列：“ChunkFive Roman”；
位置：相对位置；
转换：所有.2输入输出0；
}
.nav1:悬停{
宽度=900px；
}
.nav2:悬停{
宽度=900px；
}
.nav3:悬停{
宽度=900px；
}
.nav4:悬停{
宽度=900px；
}
#导航{
背景：蓝色；
}

我的另一面
关于我

展示

爱好

联系方式

所以你的悬停宽度有一个输入错误-

宽度=900px

应该是

宽度：900px

这就是说，即使在您让它工作时，如果浏览器视口不够宽，其他链接也会被推到新行上

一种解决方案是使用

显示：表格

/

显示：表格单元格

兼容性：

首先，让我们改进我们的标记：

• 把它全部包起来

• 是一段文字，而这些文字肯定不是。让我们只使用

  ，但是让我们为不支持它的浏览器提供一个后备方案。悬停单元格的宽度较大：
  
  #primary a:hover { 
      width: 50%;
  }  
  
  

完整示例 在本例中，导航有一个

最大宽度：1000px

，以防止其变得太宽

正文{
保证金：0；
}
h1{
文本对齐：居中；
}
#初级的{
背景：黑色；
背景：url（wallpaper.png）；
高度：100px；
显示：表格；
保证金：0自动；
表布局：固定；
宽度：100%；
最大宽度：1000px；
空白：nowrap；
溢出：隐藏；
}
#小学a{
显示：表格单元格；
宽度：25%；
背景：#B201F5；
颜色：白色；
字体大小：30px；
过渡：宽度。2s缓进缓出，线条高度。5s缓进缓出；
字体系列：“ChunkFive Roman”；
填充物：5px；
文本对齐：居中；
垂直对齐：中间对齐；
溢出：隐藏；
}
#初级导航2{
背景：FF8600；
}
#初级导航3{
背景#FD0017；
}
#初级导航4{
背景#09EB00；
}
#初级a：悬停{
宽度：50%；
光标：指针；
}
#主：悬停a:非（：悬停）{
宽度：0%；
}

我的另一面
关于我
玻璃陈列柜
爱好
联系

jeeeezus！这么多的

我甚至都不敢编辑你的问题。只需将顶部复制，粘贴到新记事本中，然后从中查看请查看将代码复制到记事本的情况？这违背了代码块和正确格式的目的。请相应地格式化您的问题。已完成格式化，请立即格式化，不要否决D:

#primary:hover a:not(:hover) {
  width: 0%;
}

#primary a:hover { 
    width: 50%;
}