如何制作一个按钮会影响另一个元素

-1

我想让我的灯开关（左上角）在点击时更改导航栏的背景颜色，我该怎么做？这是我的代码：如何制作一个按钮会影响另一个元素

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>

来源

2015-08-29 Amorris

这里需要编写代码，另外你可以分享引擎收录链接。 –

我不知道如何添加代码。：P – Amorris

浏览[帮助中心]（http://stackoverflow.com/help）。有非常简单的指导来帮助你提出问题。 –

是的，你可以实现它没有javascript。为labeltop 你必须使你的代码的三个转变 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>

添加CSS低于.nav

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; 
}

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

 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; 
    }

你可以看到这里的工作小提琴

See woking fiddle

来源

2015-08-29 04:37:38

下面介绍如何使用jQuery来处理这个问题：

$('#lightswitch').on('click', function() { 
    $('nav').css('background-color', 'green'); 
});

最佳

来源

2015-08-29 03:59:04

有什么办法可以用纯CSS做到这一点。我试图不惜一切代价避免JS，因为，让我们面对它，这是废话。 – Amorris

@Amorris JS是废话？我真的希望你在开玩笑。除非你喜欢大多数功能不多的静态页面。 –

Theres比JS更好 – Amorris

您可以通过纯JavaScript很容易做到这一点。

document.querySelector('#lightswitch').addEventListener('click', function() { 
    document.querySelector('nav').style["background-color"] = "Green Color Code"; 
});

来源

2015-08-29 04:04:23

如何制作一个按钮会影响另一个元素

回答

相关问题