Question

a {
  text-decoration: none;
}

.header {
  position: relative;
  top: 1px;
  left: 589px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.subtitle {
  position: relative;
  right: 26px;
  letter-spacing: 2px;
  padding-top: 5px;
  font-size: 21px;
  font-family: arial;
  font-weight: bold;
  color: #6b6b6b;
  text-shadow: 0px 0 #6b6b6b, 0 0px #6b6b6b, 2px 0 #6b6b6b, 0 0px #6b6b6b;
}


/* Menu*/

nav {
  position: relative;
  left: 210px;
  height: 70px;
  border-radius: 60px;
  background: #dc67e9;
  width: 1000px;
}

ul {
  margin-left: 17%;
}

ul li {
  display: inline-block;
  line-height: 80px
}

ul li a {
  text-decoration: none;
  font-family: 'Coiny', cursive;
  font-size: 19px;
  color: white;
  padding: 0 20px
}

ul li a:hover {
  color: black;
}

.bannerimage {
  margin-left: 5px;
  margin-top: 4px;
}

.banner {
  margin-top: 4px;
  background-color: #dc67e9;
  width: 100%;
  height: 589px;
}

.bannerpromo1 {
  position: relative;
  bottom: 500px;
  margin-left: 60px;
  font-family: 'Lobster', cursive;
  color: black;
  text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
  font-size: 70px;
}

.bannerpromo2 {
  position: relative;
  bottom: 470px;
  margin-left: -780px;
  font-family: 'Lobster', cursive;
  color: #585656;
  text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
  font-size: 50px;
  text-align: center;
}

.subscribebanner {
  width: 250px;
  height: 50px;
  background-color: #dc67e9;
  position: relative;
  left: 190px;
  bottom: 430px;
  border: 4px solid white;
}

.subscribebannertext {
  margin-left: 30px;
  margin-top: 15px;
  font-family: 'Coiny', cursive;
  word-spacing: 2px;
  font-size: 30px;
}

.howitworks {
  font-size: 60px;
  font-family: 'Lobster', cursive;
  text-shadow: #a8a8a8 4px 6px;
  margin-top: 50px;
  position: relative;
  left: 555px;
}

.subheaderbox1 {
  position: relative;
  margin-top: 20px;
  right: 315px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}

.subheaderbox2 {
  position: relative;
  bottom: 100px;
  left: 65px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}

.subheaderbox3 {
  position: relative;
  bottom: 200px;
  left: 450px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}

.subheaders {
  position: relative;
  bottom: 275px;
  font-size: 40px;
  margin-left: -265px;
  word-spacing: 250px;
  letter-spacing: 3px;
  color: white;
}

.box1 {
  position: relative;
  right: 370px;
  bottom: 225px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}

.box2 {
  position: relative;
  right: -15px;
  bottom: 500px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}

.box3 {
  position: relative;
  right: -405px;
  bottom: 780px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}

.step1 {
  position: relative;
  right: 932px;
  bottom: 219px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}

.step2 {
  position: relative;
  right: 546px;
  bottom: 493px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}

.step3 {
  position: relative;
  right: 153px;
  bottom: 766px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}

.section1 {
  position: relative;
  margin-top: 20px;
  bottom: 660px;
  background-color: #adcae1;
  margin-left: -570px;
  width: 720px;
  height: 500px;
  text-align: center;
  color: white;
}

.section2 {
  position: relative;
  left: 149px;
  bottom: 660px;
  background-color: #adcae1;
  width: 720px;
  height: 500px;
  text-align: center;
  color: white;
}

.section1title {
  padding-top: 80px;
  font-size: 70px;
}

.section1text {
  font-size: 40px;
  text-shadow: none;
  color: #f0f0f0;
}

.section2title {
  padding-top: 100px;
  font-size: 70px;
}

.section2text {
  font-size: 35px;
  text-shadow: none;
  color: #f0f0f0;
  padding-left: 1px;
}

.imgsect1 {
  margin-left: 148px;
  position: relative;
  bottom: 1660px
}

.imgsect2 {
  position: relative;
  bottom: 1668px;
  right: 571px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>SweetVie-Home-Page</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="indexstyle.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Lobster" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
    <link rel="stylesheet" href="indexstyle.css">
    <style>
      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="topfiller"></div>

    <div class="header">
      <img src="images/logo.jpg" height="90" alt="SweetVieLogo">
      <h2 class="subtitle">Vegan Baking Made Easy</h2>
    </div>

    <nav>
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a href="#">COMMUNITY</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">SUBSCRIBE</a></li>
      </ul>
    </nav>

    <div class="banner">
      <img class="bannerimage" src="images/mainpageimage.jpg" width="1414px" height="580px" alt="homepagebanner">
      <h2 class="bannerpromo1">Premium Packaged <br>Dessert Baking Kits</h2>
      <h2 class="bannerpromo2">High-quality,<br> organic and<br> vegan ingredients </h2>
      <div class="subscribebanner">
        <h3 class="subscribebannertext"> <a href="Subscribe.html" style="color: white"> SUBSCRIBE</a></h3>
      </div>
    </div>

    <div class="howitworks">
      <h1>How It Works</h1>
      <div class="subheaderbox1"></div>
      <div class="subheaderbox2"></div>
      <div class="subheaderbox3"></div>
      <div class="subheaders">
        <h2>Click Prepare Enjoy</h2>
      </div>

      <div>
        <img class="box1" src="images/howitworks1.jpg" height="200" width="300" alt="step1">
      </div>
      <h3 class="step1">Select one of the three<br>subscription options</h3>
      <div>
        <img class="box2" src="images/howitworks2.jpg" height="200" width="300" alt="step2">
      </div>
      <h3 class="step2">Get involved and play<br>with your food</h3>
      <div>
        <img class="box3" src="images/howitworks3.jpg" height="200" width="300" alt="step3">
      </div>
      <h3 class="step3">Share or indulge in your<br>decadent and delicious treat</h3>

    <div class="section1">
      <h2 class="section1title">Food Time<br> Family Time</h2>
      <br>
      <p class="section1text">Timeless family fun,<br> sharing special treats with the <br> special people you love </p>
    </div>
    <div class="section2">
      <h2 class="section2title">The Next Step</h2>
      <br>
      <p class="section2text">Health and desserts don't really<br> go together, with the exception of<br> SweetVie's sweets. Vegan desserts are the<br> baby steps you need for the best kind<br> of progress</p>
    </div>
    <div class="imgsect1">
      <img src="images/homepagesection1.jpg" width="720px" height="500px" alt="Food Time Family Time.jpg">
    </div>
    <div class="imgsect2">
      <img src="images/homepagesection2.jpg" width="720px" height="500px" alt="The Next Step.jpg">
    </div>
  </body>
</html>

我目前正在为一个需要菜单栏的学校项目建立网站。以前，每当光标悬停在菜单栏上时，菜单栏就会变为黑色，但最近停止了，现在仅在选中/单击时才更改颜色。

我对html和CSS很陌生，所以我知道定位元素/ div的语法或方法可能很差。但是，如果有解决该问题的技巧或指导，那将很棒。

Answer 1

如评论中所指出，类别为bannerpromo2的div进入菜单的前面，从而阻止了悬停和单击。

至于您在“检查”时遇到的奇怪行为，那里没有魔术。由于bannerpromo2相对于底部（具有bottom: 470px;）定位，因此当您“检查”时，位置可能会发生变化，因为开发人员面板从浏览器窗口的底部打开，从而更改了bannerpromo2的bottom属性

如果您想查看所有这些信息，请为bannerpromo2提供背景色：

.bannerpromo2 {
  background-color: green;
  /* ...other props */
}

选择时与将鼠标悬停时颜色变化

1 个答案: