Question

我的网站背景分为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>

Answer 1

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）您只为第一个元素（hover）写了nw，将其更改为适用于所有元素：

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

JSFiddle Demo

CSS悬停标题问题

1 个答案: