CSS悬停字幕问题

Question

I have a my site background seperated into 4 divs so they each take up 25% of the page 我的网站背景分为4个div，因此它们各自占据了页面的25％
The goal is to have an overlay fade in when hovered over (which I applied to the first image - #nw) 目标是将鼠标悬停在上面时使叠加淡入（我将其应用于第一张图片-#nw）
The problem is that I cannot get the text from class .caption to show up 问题是我无法从.caption类获取文本来显示

The code is below: 代码如下：

CSS 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

<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>

Answer 1

1) In your HTML markup, the 4 divs are not the same, change the first one to another: 1）在您的HTML标记中，4个div不同，将第一个更改为另一个：

<div id='nw' class='bg'>
    <div class='overlay'>
        <span class='caption'>Hello World</span>
    </div>
</div>

2) In your CSS, you used ID with uppercase, in your HTML they are in lowercase, change them: 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) You wrote hover only for the first element ( nw ), change it to work for all: 3）您仅将hover在第一个元素（ nw ）上，将其更改为对所有元素都适用：

.bg:hover .overlay {
    opacity: 1;
    height:100%;
}

JSFiddle Demo . JSFiddle演示。

CSS悬停字幕问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-09-21 02:46:42

CSS悬停字幕问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-09-21 02:46:42

解决方案1
1 已采纳 2014-09-21 02:46:42