HTML/CSS悬停未按预期工作

我试图让它如此悬停，一个div模糊，然后另一个div出现在它上面

下面是一个JSFIDLE：

片段：

@进口urlhttp://fonts.googleapis.com/css?family=Lato:300,500; /* 填充正文并设置默认字体样式 */ 身体{ 字体：300 16px/1.2拉托； 背景图片：url'resource/images/witewall_3.png'； } .菜单{ 宽度：100%； 高度：50px； 边框底部：1px实心999； } /* 航行 */ .导航{ 列表样式：无； 字体大小：20px； } /* 导航列表项 1.肩并肩 2.需要进行圆定位 */ 李国荣先生{ 浮动：左；/*1*/ } /* 导航链接项目 */ .nav>lia{ 显示：块；/*1*/ 填充：12px 18px；/*2*/ 文本装饰：无；/*3*/ 颜色：999；/*4*/ 过渡：一切轻松。5s； } /* 淡出ul悬停上的所有链接 */ .nav:悬停>李a{ 不透明度：.5； 过渡：一切轻松。5s； } /* 覆盖以前的规则以高亮显示当前链接 */ .nav>li:将鼠标悬停在a上{ 不透明度：1； 颜色：E74C3C； 边框颜色：E74C3C； } .集装箱{ 宽度：1500px； 高度：800px； 保证金：自动； 边缘顶部：50px； } .游戏{ 宽度：400px； 高度：300px； 浮动：左； 背景图片：url'resource/images/ryu_sfv.jpg'； 背景尺寸：600px； 背景职位：50%； 背景重复：无重复； 方框阴影：插图0 0 90px 999，插图5px 0 10px 999，插图-5px 0 10px 999，插图5px 0 10px 999，插图-5px 0 40px 999，0 0 50px 999，-5px0px999，5px0px999； -webkit转换：宽度3s；/*Safari*/ -webkit转换延迟：1s；/*Safari*/ 过渡：.3s； } .游戏：悬停{ 过滤器：blur5px； -webkit过滤器：blur5px； -moz过滤器：blur5px； -o型过滤器：5px； -ms过滤器：blur5px； -o型过滤器：5px； } .游戏：悬停.标题{ diplay：块； } .头衔{ 宽度：400px； 高度：50px； 背景色：白色； 边缘顶部：250px； 文本对齐：居中； 显示：无； } 街头斗士

---

您的css diplay:block中有一个输入错误；您缺少一个s。

您的css diplay:block中有一个输入错误；您缺少一个s。

Ales提供的答案解决了您的问题，我支持该答案，因为这正是您所问的。但我不确定你是否想让标题变得模糊，但如果不想，你可以像下面的链接那样玩z索引，我很无聊，只是为了好玩而摆弄你的代码

小提琴：

基本上只需更改一些html：

<div class="container">
  <div class="inner-wrapper">
    <div class="games"></div>
    <div class="title">STREET FIGHTER</div>
  </div>
</div>

---

并将z-索引设置为小提琴中的值。

Ales提供的答案解决了您的问题，我支持该答案，因为这正是您所问的问题。但我不确定你是否想让标题变得模糊，但如果不想，你可以像下面的链接那样玩z索引，我很无聊，只是为了好玩而摆弄你的代码

小提琴：

基本上只需更改一些html：

<div class="container">
  <div class="inner-wrapper">
    <div class="games"></div>
    <div class="title">STREET FIGHTER</div>
  </div>
</div>

---

并将z索引设置为小提琴中的索引。

不明白您需要什么。当我检查您的小提琴时，您的显示器拼写错误。游戏：悬停。标题您的输入错误：diplay而不是display。但即使这样，你仍然会得到不太好的结果-标题也很模糊。这太令人尴尬了，我现在想删除这个问题，哈哈，这类问题应该以offtopic>排版错误结束。不知道你需要什么。当我检查你的小提琴时，你的显示器拼错了。游戏：悬停。标题你有一个拼写错误：diplay而不是display。但即使这样，你仍然会得到不太好的结果-标题也很模糊。这太令人尴尬了，我现在想删除这个问题，哈哈，这类问题应该以offtopic>排版错误结束。不要反馈打字错误应该被评论：打字错误是它不起作用的原因，这是正确的答案。在一个非主题问题中没有正确的答案，这应该被关闭为打字错误应该被评论：打字错误是它不起作用的原因，这是正确的答案。在非主题问题中没有正确的答案，这应该被关闭为排版错误哇，是的，这也解决了我的问题。我从来都不知道z-index的存在，现在我来看看，这很好，你可以从一篇文章上学到很多东西。真高兴听到：哇，是的，这也解决了我的问题。我从来都不知道z-index的存在，现在我来看看，这很好，你可以从一篇文章上学到很多东西。很高兴听到：