Html 无法在CodePen项目中的虚拟链接上使用鼠标悬停

我无法在代码笔中的虚拟链接上使用鼠标悬停。光标甚至不会变为手形图标。我指的是导航栏，虚拟链接不能正常工作。这是你的电话号码

*{
框大小：边框框；
}
身体{
宽度：100%；
保证金：0自动；
填充：0；
背景图片：url（“wallper2.jpg”）；
背景重复：重复；
}
.标题{
宽度：100%；
背景：黑色；
高度：100px；
颜色：白色；
}
.包装纸{
保证金：0自动；
宽度：75%；
背景：粉红色；
高度：1000px；
}
h1{
保证金：0自动；
位置：相对位置；
顶部：30px；
左：15px；
字号：2em；
}
保险商实验室{
列表样式类型：无；
浮动：对；
保证金：自动；
}
李{
显示：内联块；
左侧填充：20px；
字号：1.4em；
}
.最后名单{
右边填充：65px；
}
a:悬停{
颜色：#f0c330；
}

丹尼尔·萨瓦

您的h1标签与ul标签重叠

解决方案是将位置：相对添加到您的ul标签：）

因为如果没有任何z索引值，元素将按照它们在DOM中出现的顺序堆叠，而具有非静态定位（相对、绝对..）的元素将始终显示在具有默认静态定位的元素之上

h1：位置：相对位置

ul：默认静态位置

添加位置：relative将强制您的ul元素位于顶部

*{
框大小：边框框；
}
身体{
宽度：100%；
保证金：0自动；
填充：0；
背景图片：url（“wallper2.jpg”）；
背景重复：重复；
}
.标题{
宽度：100%；
背景：黑色；
高度：100px；
颜色：白色；
}
.包装纸{
保证金：0自动；
宽度：75%；
背景：粉红色；
高度：1000px；
}
h1{
保证金：0自动；
位置：相对位置；
顶部：30px；
左：15px；
字号：2em；
}
保险商实验室{
列表样式类型：无；
浮动：对；
保证金：自动；
位置：相对位置；
}
李{
显示：内联块；
左侧填充：20px；
字号：1.4em；
}
.最后名单{
右边填充：65px；
}
a:悬停{
颜色：#f0c330；
}

丹尼尔·萨瓦

您的

与所有链接重叠。例如，在

h1

上使用

display:inline block

。使用（点击

F12

）。