- 我将我的网站背景分成 4 个 div，这样他们每个 占页面的 25%
目标是在鼠标悬停时让叠加层淡入(我将其应用于第一张图片 - #nw)
问题是我无法让 .caption 类中的文本显示出来
代码如下:
CSS
.overlaytext {font-family: 'Raleway', sans-serif;}
body { height:100%; margin:0; padding:0; }
div.bg { position:fixed; width:50%; height:50% }
#NW { top:0; left:0; background-image: url('clevelandnight.jpg'); background-size:cover;}
#NE { top:0; left:50%; background-image: url('news1.jpg'); background-size:cover;}
#SW { top:50%; left:0; background-image: url('drinks1.jpg'); background-size:cover;}
#SE { top:50%; left:50%; background-image: url('clevelandday.jpg'); background-size:cover;}
.overlay {
background:rgba(0,0,0,.75);
opacity:0;
height:100%;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
-ms-transition: all .4s ease-out;
transition: all .4s ease-out;
}
#nw:hover .overlay {
opacity: 1;
height:100%;
}
.caption {
font-color:white;
z-index:100;
}
HTML
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<title>Craig Does Cleveland</title>
<link href='stylesheet2.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id='nw' class='bg'>
<div class='overlay'>
</div>
<span class='caption'>Hello World</span>
</div>
<div id='ne' class='bg'>
<div class='overlay'>
<span class='caption'>Hello World</span>
</div>
</div>
<div id='sw' class='bg'>
<div class='overlay'>
<span class='caption'>Hello World</span>
</div>
</div>
<div id='se' class='bg'>
<div class='overlay'>
<span class='caption'>Hello World</span>
</div>
</div>
</body>
</html>
最佳答案
1) 在您的 HTML 标记中，4 个 div 不相同，将第一个更改为另一个:
<div id='nw' class='bg'>
<div class='overlay'>
<span class='caption'>Hello World</span>
</div>
</div>
2) 在你的 CSS 中，你使用大写的 ID，在你的 HTML 中，它们是小写的，改变它们:
#nw { top:0; left:0; background-image: url('clevelandnight.jpg'); background-size:cover;}
#ne { top:0; left:50%; background-image: url('news1.jpg'); background-size:cover;}
#sw { top:50%; left:0; background-image: url('drinks1.jpg'); background-size:cover;}
#se { top:50%; left:50%; background-image: url('clevelandday.jpg'); background-size:cover;}
3) 您只为第一个元素 (nw) 编写了 hover，将其更改为适用于所有元素:
.bg:hover .overlay {
opacity: 1;
height:100%;
}
关于html - CSS 悬停标题问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25955284/