Question

我试图在悬停时进行此操作，div模糊，然后在其上方显示另一个div。

这是一个JSFiddle：https://jsfiddle.net/vmqmbx94/

段：

@import url(http://fonts.googleapis.com/css?family=Lato:300,500);

/*
  pad the body and set default font styles
*/
body {
	font: 300 16px/1.2 Lato;
	background-image: url('resource/images/witewall_3.png');
}

.menu {
	width: 100%;
	height: 50px;
	border-bottom: 1px solid #999;
}
/*
  navigation
*/
.nav {
	list-style: none;
	font-size: 20px;
}

/*
  nav list items
  1. side by side
  2. needed for circle positioning
*/
.nav li {
	float: left; /*1*/
}

/*
  nav link items
*/
.nav>li a {
	display: block; /*1*/
	padding: 12px 18px; /*2*/
	text-decoration: none; /*3*/
	color: #999; /*4*/
	transition: all ease .5s;
}

/*
  fade out all links on ul hover
*/
.nav:hover>li a {
	opacity: .5;
	transition: all ease .5s;
}

/*
  override previous rule to highlight current link
*/
.nav>li:hover a {
	opacity: 1;
	color: #E74C3C;
	border-color: #E74C3C;
}

.container {
	width: 1500px;
	height: 800px;
	margin: auto;
	margin-top: 50px;
}

.games {
	width: 400px;
	height: 300px;
	float: left;
	background-image: url('resource/images/ryu_sfv.jpg');
	background-size: 600px;
	background-position: 50%;
	background-repeat: no-repeat;
	box-shadow: inset 0 0 90px #999, inset 5px 0 10px #999, inset -5px 0
		10px #999, inset 5px 0 10px #999, inset -5px 0 40px #999, 0 0 50px
		#999, -5px 0 0px #999, 5px 0 0px #999;
	-webkit-transition: width 3s; /* Safari */
	-webkit-transition-delay: 1s; /* Safari */
	transition: .3s;
}

.games:hover {
	filter: blur(5px);
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	-o-filter: blur(5px);
}

.games:hover .title {
	diplay: block;
}

.title {
	width: 400px;
	height: 50px;
	background-color: white;
	margin-top: 250px;
	text-align: center;
	display: none;
}

<div class="menu">
  <ul class="nav">
    <li><a href="./">Home</a><i class="circle"></i></li>
    <li><a href="./games">Games</a></li>
    <li><a href="./players">Players</a></li>
    <li><a href="">News</a></li>
    <li style="float: right">
      <a href="./login">Login/Sign up</a>
    </li>
  </ul>
</div>
<div class="container">
  <div class="games">
    <div class="title">STREET FIGHTER</div>
  </div>
</div>

如您所见，div在悬停时模糊，但另一个在悬停时不显示。

我正在努力让课程games变得模糊，而课程title会出现，但不会模糊。

如何让它达到我想要的效果？我做错了什么？

PS：我不知道如何编辑HTML / CSS问题，所以如果有人想调整我的代码块，请继续。

Answer 1

你有一个错字css diplay: block;你错过了一个。

Answer 2

@Ales提供的答案解决了您的问题，我提出了答案，因为这就是您的要求。但是我不确定你是否想要标题是否模糊，但如果没有，你可以使用z-index，就像下面的链接一样（我很无聊，只是为了好玩而摆弄你的代码）。

小提琴：https://jsfiddle.net/5s33ckzz/

基本上只需更改一些html：

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

并将z-index设置为小提琴。

HTML / CSS悬停不按预期工作

2 个答案: