Html 设计悬停滑块时，显示块不在css中工作

我正在设计一个悬停滑块，在悬停时应该向下滑动一个下拉菜单，它应该在块显示中，在应用display:block后在样式表中；它仍然仅以内联方式显示

在尝试将其放入块中时，我直接将显示块应用于一个元素，然后按预期在块中打印所有内容，但在尝试使用class时，slidercontent不起作用，即它不在块中显示

.media{
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
宽度：100%；
身高：100%；
溢出：隐藏；
}
.背景{
指针事件：无；
z指数：1；
身高：100%；
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
背景：rgba（43,74,111,0.2）；
}
.目录{
显示器：flex；
证明内容：中心；
z指数：2；
字体：斜体；
字体大小：粗体；
颜色：rgb（27,5,58）；
边框：固体10px rgba（3,35,54,0.6）；
填充：-3%；
}
.幻灯片联系人{
宽度：80px；
字体：斜体；
字体大小：1.1米；
颜色：rgb（7,18,58）；
背景色：rgba（1221341730.5）；
边框：3倍实心rgb（6,21,57）；
}
.滑块{
显示器：flex；
保证金权利：1.9%；
利润率最高：-5%；
利润底部：1%；
弯曲方向：立柱；
对齐项目：柔性端；
}
.幻灯片内容{
显示：无；
背景色：rgba（1962311540.9）；
宽度：187px；
}
.滑块：悬停.滑块内容{
显示：块；
}
.slider:悬停.slidercontact{
背景色：rgb（277,0,0）；
}

`
注册页
接触

问题在于

.background

。它在自己的堆叠上下文中绝对位于页面上的所有其他内容之上。因此，

.slider

上的悬停未触发。我删除了类并将

背景色

移动到

主体

更新 要在自己的行中创建文本

1

和

2

的链接，必须在

a

的

slidercontent

内部设置

block

正文{
最小高度：100vh；
保证金：0；
背景：rgba（43,74,111,0.2）；
}
.媒体{
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
宽度：100%；
身高：100%；
溢出：隐藏；
}
.目录{
显示器：flex；
证明内容：中心；
z指数：2；
字体：斜体；
字体大小：粗体；
颜色：rgb（27,5,58）；
边框：固体10px rgba（3,35,54,0.6）；
填充：-3%；
}
.幻灯片联系人{
宽度：80px；
字体：斜体；
字体大小：1.1米；
颜色：rgb（7,18,58）；
背景色：rgba（1221341730.5）；
边框：3倍实心rgb（6,21,57）；
}
.滑块{
显示器：flex；
保证金权利：1.9%；
利润率最高：-5%；
利润底部：1%；
弯曲方向：立柱；
对齐项目：柔性端；
}
.幻灯片内容{
显示：无；
背景色：rgba（1962311540.9）；
宽度：187px；
}
.幻灯片内容a{
显示：块；
}
.滑块：悬停.滑块内容{
显示：块；
}
.slider:悬停.slidercontact{
背景色：rgb（277,0,0）；
}

`
注册页
电子邮件ID

您希望将

.slidercontent

中的内容显示为块

首先，

.background

绝对位于UI顶部，防止代码触发

。滑块：悬停

其次，

.slidercontent

中的内容是

标记，它是内联元素

因此，需要将代码更改为：

.background {
 /* add a line in the background class*/
    z-index: -1;
}

/* to make the <a> tag block */
    .slidercontent a {
      display: block;
    }

.background{
/*在后台类中添加一行*/
z指数：-1；
}
/*创建标记块的步骤*/
.幻灯片内容a{
显示：块；
}

您希望哪些元素显示为块？您的按钮和悬停菜单是块（在另一个下面）。您的

标记是内联的，因为它们没有设置为

显示：块。你的问题不是很清楚，你的
背景
遮住了你的按钮（因此你无法触发悬停），你在一个未定位的元素上有一个
z-index
，等等。你最好只发布一个你想要的屏幕截图。我的幻灯片内容是1和2，是内联打印的，我希望它们是在块中，由于我在css中应用了.slidecontents{display:block；}，所以我的元素1,2仍然是内联的而不是block display。您的解决方案是正确的，但只想指出有一个
.background
中OP的问题中缺少code>。这实际上导致了你提到的行为。