Question

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

我从codepen.io复制了代码以创建网站框架。有3个div使用“ title”类，当我使用“ title：hover”进一步设置样式时，其中两个会响应。

但是第二个div对“ title：hover”中的CSS没有响应。

我试图给它一个自己的类或一个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具有比第二个z-index更高的.title。

因此，当悬停.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

视差滚动内容样式

1 个答案: