视差滚动内容样式

Question

我对视差滚动中的样式问题有疑问。

我从 codepen.io 复制了代码来为站点创建框架。有 3 个 div 使用 "title" class，当我使用 "title:hover" 进一步设置它们的样式时，其中两个会响应。

但是第二个 div 没有响应 "title:hover" 中的 CSS。

我试着给它一个 class 自己的 ID 或一个 ID，但都没有用。我尝试像第 115 行和第 125 行的其他两个 div 一样添加“:before”，但它完全搞砸了整个 div.

我认为潜在的问题是我缺乏经验，而且我对代码的工作方式不是 100%，所以我自己无法解决问题。时间和实践将解决这些问题，但现在非常感谢任何帮助！

这是代码，html 先是样式表：

<!DOCTYPE>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheetII.css">
</head>
<body>
<div id="title" class="slide header">
  <h1>OQO</h1>
</div>

<div id="slide_I" class="slide">
  <div class="title">
    <h1>A Chique Retreat</h1>
    <p>Your stylish coffeehouse to meet friends and relax, right in the heart of this vibrant city. Step out of the hussle and bussle and step into the suave Luxe Deco of the OQO cafe - your coffee nook.</p>
     <h2>About Us >></h2>
  </div>
 </div>

<div id="slide_II" class="slide">
  <div class="title">
    <h1>Coffee and Treats</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
      <h2 style="float: right;"> << Menu </h2>
  </div>
  <img src="images/test_VIII.jpg">
  <img src="images/test_IX.jpg"> 
</div>

<div id="slide_III" class="slide">
  <div class="title">
    <h1>Venue</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
    <h2>Events >></h2>
  </div>
</div>

<div id="slide_IV" class="slide header">
  <h1>Get in touch</h1>
</div>
</body>
</html>

/* 样式表 */

@import url(https://fonts.googleapis.com/css?family=Cinzel+Decorative);


html {
  height: 100%;
  overflow: hidden;
}

body { 
  margin:0;
  padding:0;
    perspective: 1px;
    transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: 'Cinzel Decorative';
}

h1 {
  font-size: 250%
}

p {
  font-size: 140%;
  line-height: 150%;
  color: #333;
}

.slide {
  position: relative;
  padding: 25vh 10%;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
    transform-style: inherit;
}

img {
  position: absolute;
  top: 50%;
  left: 35%;
  width: 320px;
  height: 240px;
  transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
  padding: 10px;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

img:last-of-type {
  transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}

.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);
}

.title {
  width: 50%;
  padding: 5%;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

.title:hover {
box-shadow: 0 0 18px rgba(0, 0, 0, 1.5);
}

.title h2:hover  {
  text-decoration: underline;
}

.slide:nth-child(2n) .title {
  margin-right: auto;
  margin-left: 0;
}

.slide:nth-child(2n+1) .title {
  margin-left: auto;
  margin-right: 0;
}

.slide, .slide:before {
  background: 50% 50% / cover;  
}

.header {
  text-align: center;
  font-size: 175%;
  color: #fff;
  text-shadow: 0 2px 2px #000;
}

#title {
  background-image: url(images/oqo_owners.jpg);
  z-index:2;
}

#title h1 {
 transform: translateZ(.25px) scale(.75);
 transform-origin: 50% 100%;

}

#slide_I:before {
  background-image: url(images/test_V.jpg);
  transform: translateZ(-1px) scale(2);
}

#slide_II {
  background-image: url(images/test_VII.jpg);
  z-index:2;
}

#slide_III:before {
  background-image: url(images/test_X.jpg);
  transform: translateZ(-1px) scale(2);
}

#slide_IV {
  background: #222;
  color: gold;
}

#slide_IV:hover {
    text-shadow: 1px 1px 2px black, 0 0 25px lightgrey, 0 0 5px grey;
}

Answer 1

出现此行为是因为类名 slide_II 的 div 比第二个 .title div.

具有更高的 z-index

因此，当悬停 .title div 时，您实际上悬停在 slide_II div 上面。

将更高的z-index和位置relative设置为.title，:hover功能将正常工作。

@import url(https://fonts.googleapis.com/css?family=Cinzel+Decorative);
html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: 'Cinzel Decorative';
}

h1 {
  font-size: 250%
}

p {
  font-size: 140%;
  line-height: 150%;
  color: #333;
}

.slide {
  position: relative;
  padding: 25vh 10%;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
  transform-style: inherit;
}

img {
  position: absolute;
  top: 50%;
  left: 35%;
  width: 320px;
  height: 240px;
  transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
  padding: 10px;
  border-radius: 5px;
  background: rgba(240, 230, 220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

img:last-of-type {
  transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}

.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);
}

.title {
  width: 50%;
  padding: 5%;
  border-radius: 5px;
  background: rgba(240, 230, 220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

.title:hover {
  box-shadow: 0 0 18px rgba(0, 0, 0, 1.5);
}

.title h2:hover {
  text-decoration: underline;
}

.slide:nth-child(2n) .title {
  margin-right: auto;
  margin-left: 0;
}

.slide:nth-child(2n+1) .title {
  margin-left: auto;
  margin-right: 0;
  position: relative;
  z-index: 3;
}

.slide,
.slide:before {
  background: 50% 50% / cover;
}

.header {
  text-align: center;
  font-size: 175%;
  color: #fff;
  text-shadow: 0 2px 2px #000;
}

#title {
  background-image: url(images/oqo_owners.jpg);
  z-index: 2;
}

#title h1 {
  transform: translateZ(.25px) scale(.75);
  transform-origin: 50% 100%;
}

#slide_I:before {
  background-image: url(images/test_V.jpg);
  transform: translateZ(-1px) scale(2);
}

#slide_II {
  background-image: url(images/test_VII.jpg);
  z-index: 2;
}

#slide_III:before {
  background-image: url(images/test_X.jpg);
  transform: translateZ(-1px) scale(2);
}

#slide_IV {
  background: #222;
  color: gold;
}

#slide_IV:hover {
  text-shadow: 1px 1px 2px black, 0 0 25px lightgrey, 0 0 5px grey;
}

<div id="title" class="slide header">
  <h1>OQO</h1>
</div>

<div id="slide_I" class="slide">
  <div class="title">
    <h1>A Chique Retreat</h1>
    <p>Your stylish coffeehouse to meet friends and relax, right in the heart of this vibrant city. Step out of the hussle and bussle and step into the suave Luxe Deco of the OQO cafe - your coffee nook.</p>
    <h2>About Us >></h2>
  </div>
</div>

<div id="slide_II" class="slide">
  <div class="title">
    <h1>Coffee and Treats</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
      viris docendi denique vim.</p>
    <h2 style="float: right;">
      << Menu </h2>
  </div>
  <img src="images/test_VIII.jpg">
  <img src="images/test_IX.jpg">
</div>

<div id="slide_III" class="slide">
  <div class="title">
    <h1>Venue</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
      viris docendi denique vim.</p>
    <h2>Events >></h2>
  </div>
</div>

<div id="slide_IV" class="slide header">
  <h1>Get in touch</h1>
</div>

JSFiddle link

视差滚动内容样式

Parallax scrolling content styling

html

css

hover

parallax