Кнопка по клику на неё не переходит в новое состояние, не знаю, как исправить положение, помогите пожалуйста!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="light.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/effect.js"></script>
</head>
<body>
<div id="wrapper">
<input type="checkbox" name="switch" id="switch">
<div class="red">
<label class="switch" for="switch"><!--<span></span>--></label>
</div>
</div>
</body>
</HTML>
css:
@font-face {
font-family: MrGrieves-Regular; /* Гарнитура шрифта */
src: url(fonts/MrGrieves-Regular.otf); /* Путь к файлу со шрифтом */
}
html {
height: 100%;
}
body {
height: 100%;
display: inline;
margin: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#wrapper {
height: 100%;
background: url(light.gif) no-repeat center bottom;
background-size: cover;
}
.switch {
display: block;
position: absolute;
width: 70px;
height: 100px;
margin: 70px auto;
border-radius: 50px;
background: #e6e3da;
background: linear-gradient(#e6e3da, #fff);
border: 1px solid rgba(0,0,0,0.1);
box-shadow:
inset 0 7px 0 #fdfdfd,
0 2px 3px rgba(170, 160, 140,.3);
cursor: pointer;
}
}
.switch:before {
content: "";
position: absolute;
top: -10px; bottom: -10px;
left: -5px; right: -5px;
z-index: -1;
background: #f2f1ed;
border-radius: inherit;
box-shadow:
0 1px 1px rgba(#aea391,0.2),
0 3px 3px rgba(170, 160, 140, 0.4),
inset 0 1px 0 rgba(255,255,255,0.8),
0 0 5px rgba(170, 160, 140, 0.5);
}
.switch:after {
content: "";
position:absolute;
width: 60px;
height: 70px;
border-radius: 50%;
z-index: -1;
left: 18px;
top: 10px;
background: linear-gradient(160deg, rgba(170, 160, 140, 0.7), rgba(170, 160, 140, 0));
background: -webkit-linear-gradient(290deg, rgba(170, 160, 140, 0.75), rgba(170, 160, 140, 0));
-webkit-filter: blur(1px);
}
#switch {
clip: rect(0 0 0 0);
position: absolute;
visibility: hidden;
}
#switch:checked ~ .switch {
background: linear-gradient(#f7f6f4, #fff);
box-shadow:
inset 0 -5px 0 #dbd3c8,
0 6px 5px rgba(170, 160, 140, 0.75),
3px 16px 5px rgba(170,160,140, 0.3);
border-bottom: none;
}
#switch:checked ~ .switch:after {
display: none;
}
.red { background:url(light2.gif) no-repeat center bottom;
background-size: cover;
}
js:
$(function() {
22
var x = $('#wrapper').css('background');
23
var y = $('#wrapper > div').css('background');
24
$('#wrapper > div').on('click', function() {
25
$('#wrapper').css('background') == y ? $('#wrapper').css('background', x) : $('#wrapper').css('background', y);
26
});
27
});
