html - 如何使按钮影响另一个元素

标签 html css

我想让我的电灯开关(左上角)在单击时更改导航栏的背景颜色，我该怎么做？这是我的代码:

body {
  margin: 0px;
  padding: 0px;
  overflow-y: scroll;
  font-family: Helvetica;
  font-size: 18px;
  background-color: #bdbdbd;
}
.nav {
  background-color: #222;
  position: relative;
  width: 100%;
}
.nav_wrapper {
  width: 960px;
  margin: 0 auto;
  text-align: left;
}
.nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.nav ul li {
  display: inline-block;
  background-color: #222;
  transition: background-color 0.3s ease-in;
  position: relative;
  padding-top: 3px;
  padding-bottom: 3px;
}
.nav ul li img {
  width: 12px;
  height: 10px;
  vertical-align: middle;
  padding-left: 10px;
}
.nav ul li a,
visited {
  display: block;
  padding: 15px;
  text-decoration: none;
  transition: color 0.2s ease-in;
}
.nav ul li a:hover {
  text-decoration: none;
  color: #099;
}
.navhome {
  color: #099;
  border-bottom: 3px solid #099;
}
.navother {
  color: #ccc;
}
.content {
  text-align: center;
  line-height: 130%;
  font-size: 20px;
  display: inline-block;
}
.bdaimg {
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  margin-top: 30px;
  transform: scale(1);
  transition-duration: 0.3s;
  border-radius: 15px;
}
.bdaimg:hover {
  transform: scale(1.1);
  transition-duration: 0.3s;
}
.nu {
  font-weight: bold;
  font-size: 25px;
}
h3 {
  font-weight: bold;
  text-decoration: underline;
}
h2 {
  font-weight: bold;
  text-decoration: underline;
}
.bdaimg2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  margin-top: 30px;
  transform: scale(1);
  transition-duration: 0.3s;
  border-radius: 15px;
}
.bdaimg2:hover {
  transform: scale(1.1);
  transition-duration: 0.3s;
}
/*Light Switch*/

label {
  display: block;
  height: 25px;
  width: 100px;
  background: white;
  text-align: center;
  font: 14px/25px Helvetica, Arial, sans-serif;
  margin: 20px 0;
  position: absolute;
}
label:hover {
  background: #ddca7e;
  color: white;
  cursor: pointer;
}
input#lightswitch {
  position: fixed;
  top: -9999px;
  left: -9999px;
}
input#lightswitch + .content {
  background-color: #bdbdbd;
  transition: background-color 0.5s ease-in;
}
/*Switched Off*/

input#lightswitch:checked + .content {
  background-color: #222;
  transition: background-color 0.5s ease-in;
}
input#lightswitch:checked + .content {
  color: white;
  transition: color 0.5s ease-in;
}
input#lightswitch:checked + .content {
  color: white;
  transition: color 0.5s ease-in;
}
<!DOCTYPE html>

<head>
  <title>Beijing Dance Academy</title>
  <link rel="stylesheet" type="text/css" href="bda.css">
</head>

<body>
  <div class="nav">
    <div class="nav_wrapper">
      <ul>
        <li><a class="navother" href="Home.html">Home</a>
        </li>
        <li><a class="navother" href="CR.html">Cultural Revolution</a>
        </li>
        <li><a class="navhome" href="BDA.html">Beijing Dance Academy</a>
        </li>
        <li><a class="navother" href="CNY.html">Chinese New Year</a>
        </li>
      </ul>
    </div>
  </div>
  <label for="lightswitch">Light Switch</label>
  <input type="checkbox" id="lightswitch" />
  <div class="content">
    <img src="bda.png" alt="BDA" class="bdaimg">
    <p>
      <h2>Beijing Dance Academy</h2>
      Beijing Dance Academy, or BDA, was the first professional dance school founded in China, in 1954. The academy was helped by Soviet Russia in building the academy and the techniques they used to learn dance. Although Russia helped with the Beijing Dance
      Academy, China's repressive Communist government forbidded Russian presence in the school. The Beijing Dance Academy soon opened back up to all people from around the world when, in 1976, China's Communist leader, Mao Zedong, died.
      <br>
      <br>Several times a year, Beijing Dance Academy holds auditions to be accepted into the school, for more disadvantaged areas officals come around small towns and schools and pick out children of age, the academy initially only accepted students from
      ages 11 to 18 but eventually the age range expanded. They then test the student's basic body abilities. More than 2,000 children audition to be accepted into the academy but only 1 in every 20 make the cut. Majority of the children in the academy
      are Chinese but the academy has an additional program that allows international students to apply.
      <br>
      <br>
      <h3>
    A Day in the Life of a Student
  </h3>
      A day of a Beijing Dance Academy student starts with basic warm-ups and stretches such as flexibility exercises and drills for turns and jumps. After breakfast, the students have a ballet technique class followed by character dance or pas de deux exercises.
      Then after lunch, the students study normal subjects such as mathematics or Chinese for 3 hours. In the afternoon, they have repertory classes or study or do homework. The Beijing Dance Academy is run for the whole week...
    </p>
    <p class="nu">
      INCLUDING SATURDAY AND SUNDAY!
      <img src="sadface.png" alt="SpongebobSadFace" class="bdaimg2">
    </p>
  </div>
</body>

最佳答案

是的，你可以不用javascript来实现它。 您必须对代码进行三处更改 1.将#lightswitch放在.nav容器

之前 
  <label for="lightswitch">Light Switch</label>
  <input type="checkbox" id="lightswitch" />
<div class="nav">
    <div class="nav_wrapper">
      <ul>
        <li><a class="navother" href="Home.html">Home</a>
        </li>
        <li><a class="navother" href="CR.html">Cultural Revolution</a>
        </li>
        <li><a class="navhome" href="BDA.html">Beijing Dance Academy</a>
        </li>
        <li><a class="navother" href="CNY.html">Chinese New Year</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="content">
    <img src="bda.png" alt="BDA" class="bdaimg">
    <p>
      <h2>Beijing Dance Academy</h2>
      Beijing Dance Academy, or BDA, was the first professional dance school founded in China, in 1954. The academy was helped by Soviet Russia in building the academy and the techniques they used to learn dance. Although Russia helped with the Beijing Dance
      Academy, China's repressive Communist government forbidded Russian presence in the school. The Beijing Dance Academy soon opened back up to all people from around the world when, in 1976, China's Communist leader, Mao Zedong, died.
      <br>
      <br>Several times a year, Beijing Dance Academy holds auditions to be accepted into the school, for more disadvantaged areas officals come around small towns and schools and pick out children of age, the academy initially only accepted students from
      ages 11 to 18 but eventually the age range expanded. They then test the student's basic body abilities. More than 2,000 children audition to be accepted into the academy but only 1 in every 20 make the cut. Majority of the children in the academy
      are Chinese but the academy has an additional program that allows international students to apply.
      <br>
      <br>
      <h3>
    A Day in the Life of a Student
  </h3>
      A day of a Beijing Dance Academy student starts with basic warm-ups and stretches such as flexibility exercises and drills for turns and jumps. After breakfast, the students have a ballet technique class followed by character dance or pas de deux exercises.
      Then after lunch, the students study normal subjects such as mathematics or Chinese for 3 hours. In the afternoon, they have repertory classes or study or do homework. The Beijing Dance Academy is run for the whole week...
    </p>
    <p class="nu">
      INCLUDING SATURDAY AND SUNDAY!
      <img src="sadface.png" alt="SpongebobSadFace" class="bdaimg2">
    </p>
  </div>

  1. 为 .nav 下 label 的 top 添加 css

    label {
  display: block;
  height: 25px;
  width: 100px;
  background: white;
  text-align: center;
  font: 14px/25px Helvetica, Arial, sans-serif;
  margin: 20px 0;
  position: absolute;
    top:50px;
}

  2. 为 input#lightswitch ~ .nav 添加类似于 input#lightswitch ~ .content 的 css

            input#lightswitch ~ .content {
      background-color: #bdbdbd;
      transition: background-color 0.5s ease-in;
    }
    /*Switched Off*/

    input#lightswitch:checked ~ .content {
      background-color: #222;
      transition: background-color 0.5s ease-in;
    }
    input#lightswitch:checked ~ .nav{
      background-color: #eee;
      transition: background-color 0.5s ease-in;
    }
    input#lightswitch:checked ~ .nav ul li {
      background-color: #eee;
      transition: background-color 0.5s ease-in;
    }
    input#lightswitch:checked ~ .nav ul li a.navother {
      color: #111;
      transition: color 0.5s ease-in;
    }
    input#lightswitch:checked ~ .content {
      color: white;
      transition: color 0.5s ease-in;
    }
    input#lightswitch:checked ~ .content {
      color: white;
      transition: color 0.5s ease-in;
    }

你可以在这里看到工作中的 fiddle

See woking fiddle

关于html - 如何使按钮影响另一个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32282450/

上一篇：javascript - 我有一个按钮，单击时会更改其中的文本，但不会改回

下一篇：html - 如果它位于桌面上的标题内，如何使导航响应？

相关文章：

html - 为什么弹出窗口的某些部分被切断

html - 混合搭配表格元素和表格样式元素

html - 如何在其 float 的主 div 之外获取标题并将其全宽放置在页面顶部

html - 将内联 block 与 nowrap 一起使用时，子 div 超出父 div

javascript - TypeError : text. select 不是一个函数

html - 移动 safari 中的网页 url 栏不是 "shrinking"

html - 在链接鼠标悬停时显示播放图标

Javascript:在页面上多次更改 <a href> 以匹配 <img src>

javascript - jQuery UI 可调整大小的反向

css - 如何使div在内部顺风css滚动

©2024 IT工具网  联系我们