Javascript 悬停在空白处

HTML如下所示（我使用的是React BTW）：

.iss{
宽度：100%；
z指数：-1；
位置：绝对位置；
左：0；
过渡：所有0.5s缓进缓出；
}
.标题部分{
边缘顶部：250px；
指针事件：无；
}
.dgs标题{
颜色：白色；
字体系列：Verdana，日内瓦，塔荷马，无衬线；
保证金：自动；
}
D.dgs第7段{
颜色：白色；
字体系列：Verdana，日内瓦，塔荷马，无衬线；
}
.iss:悬停{
-webkit过滤器：模糊（5px）；
过滤器：模糊（5px）；
}

SpaceX Dragon 2模拟器
使用宇航员执行任务时使用的控制装置，在这个实时模拟器中将SpaceX Dragon 2卫星对接到国际空间站

首先，提问时请缩进html代码

尝试以下操作以居中

。标题部分

.heading-section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

如果将
.heading部分
更改为
位置：绝对
，并且
指针事件：无
，则悬停将传递到基础图像

以整页模式查看此内容：


.iss{
宽度：100%；
z指数：-1；
位置：绝对位置；
左：0；
顶部：50px；
过渡：所有0.5s缓进缓出；
}
/*航向覆盖：使用绝对定位*/
.标题部分{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
指针事件：无；/*将悬停传递给img*/
}
.dgs标题{
颜色：白色；
字体系列：Verdana，日内瓦，塔荷马，无衬线；
保证金：自动；
}
D.dgs第7段{
颜色：白色；
字体系列：Verdana，日内瓦，塔荷马，无衬线；
}
/*覆盖“指针事件：无”以允许按钮单击*/
.dgs btn{
指针事件：自动；
}
.iss:悬停{
-webkit过滤器：模糊（5px）；
过滤器：模糊（5px）；
}

SpaceX Dragon 2模拟器
将SpaceX Dragon 2卫星对接到
国际空间站在这个带有控件的实时模拟器中
我们的宇航员在执行任务时使用

现在试试
您需要一个包含图像和标题的包装器，当该包装器悬停在您身上时，会模糊图像

当然，你可以按照Kevin提到的方式将标题部分居中

因此，根据我所说的解决方案，相同的html和css将类似于：

.iss {
    width: 100%;
    z-index: -1;
    left: 0;
    transition: all 0.5s ease-in-out;
}

.heading-section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dgs-heading {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: auto;
}

.dgs-para {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.iss:hover {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.dragon-sim {
    position: relative;
}

.dragon-sim:hover > .iss {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

这似乎是做你想要的，它模糊了图像，但不是文本，你仍然可以与文本和按钮互动没有问题

此外，文本可读性不强，我建议在标题部分添加一些透明背景

还要注意，我删除了
指针事件：none
由于不再需要该属性，再加上无法单击该按钮，因此您肯定不想使用该属性，这可能就是您要搜索的内容。删除
指针事件：无并更改
位置：绝对到
.heading部分
而不是图像。以及添加以下代码：

.dragon-sim {
  position: relative;
  text-align: center;
}

下面是一个工作示例（我将
className
更改为
class
，只是为了让这个示例运行，只是将其更改回react）

编辑：将其添加到CSS中，即使将鼠标悬停在页眉上也会模糊

.dragon-sim:hover .iss {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

示例如下：


.iss{
宽度：100%；
z指数：-1；
过渡：所有0.5s缓进缓出；
}
龙先生{
位置：相对位置；
文本对齐：居中；
}
.标题部分{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.dgs标题{
颜色：白色；
字体系列：Verdana，日内瓦，塔荷马，无衬线；
保证金：自动；
}
D.dgs第7段{
颜色：白色；
字体系列：Verdana，日内瓦，塔荷马，无衬线；
}
.dragon-sim:hover.iss{
-webkit过滤器：模糊（5px）；
过滤器：模糊（5px）；
}

SpaceX Dragon 2模拟器
将SpaceX Dragon 2卫星对接到
国际空间站在这个带有控件的实时模拟器中
我们的宇航员在执行任务时使用

如果您的z索引为-1，您希望如何将图像悬停在其上方？我不认为您的边距或填充是这里的问题，我的答案解决了各种问题，但您可能仍然希望添加一些其他样式，例如文本对齐之类的样式，但这应该已经解决了你在问题中提出的主要问题我相信我编辑了我的解决方案，因为John的解决方案让我意识到实际上图像不需要绝对定位：）很好，你的解决方案确实有效：），我想提及的唯一问题是，在您的实现中，标题部分内的按钮不可单击，我在解决方案中以不同的方式解决了这个问题：）标题居中，但只要您将鼠标悬停在标题上，背景上的模糊就会消失，问题中没有具体说明，但我认为这不应该发生。这是一个很容易解决的问题。只需将此添加到CSS代码：
.dragon-sim:hover.iss{-webkit-filter:blur（5px）；filter:blur（5px）；}
我将更新我的答案以显示此内容。太棒了是的！）谢谢