Question

我已经创建了一个开/关按钮，我希望html的内容颜色可以反转关闭时正常！而且我也希望图像和GIF保持相同的颜色..我知道它很复杂：x但问题是因为按钮会在html中的div里面我不能使用{{ 1}} + space或~触发效果..有谁知道怎么可能做到这一点？

这里是现在的代码，但是对于html部分来说是错误的..

＆＃13;

function invertFunction(x) {
    x.classList.toggle("invertbutton");
}

＆＃13;

.invertfunction{
  cursor:pointer;
    position:fixed;
    top:20px;
    left:20px;
    width:60px;
  height:30px;
}

#onbutton{
    width:60px;
    height:30px;
    background-color:#fff;
    border-radius:10px;
    border:1px solid #848484;
-webkit-transition:.3s ease;
-moz-transition:.3s ease;
-o-transition:.3s ease;
transition:.3s ease;
}

#movingbutton{
    width:30px;
    height:30px;
    border-radius:10px;
    border:1px solid #848484;
    background-color:#BDBDBD;
-webkit-transition:.2s ease;
-moz-transition:.2s ease;
-o-transition:.2s ease;
transition:.2s ease;
}

.invertbutton #onbutton{
    background-color:#42B94E;
}

.invertbutton #movingbutton{
transform: translate(30px);
}

.invertbutton .html{
  -webkit-filter: invert(100%);
    filter: invert(100%);
}

＆＃13;

感谢您的帮助！：）

Answer 1

您可以在此处使用此代码：

function invertFunction(x) {
  x.classList.toggle("invertbutton");
  if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {
    $("div:not(#movingbutton)").css('filter', 'invert(100%)');
    $("img").css('filter', 'invert(100%)');
  } else {
    $("div:not(#movingbutton)").css('filter', 'invert(0%)');
    $("img").css('filter', 'invert(0%)');
  }
}

你可以删除这个css：

.invertbutton .html{
  -webkit-filter: invert(100%);
    filter: invert(100%);
}

function invertFunction(x) {
  x.classList.toggle("invertbutton");
  if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {
    $("div:not(#movingbutton)").css('filter', 'invert(100%)');
    $("img").css('filter', 'invert(100%)');
  } else {
    $("div:not(#movingbutton)").css('filter', 'invert(0%)');
    $("img").css('filter', 'invert(0%)');
  }
}

div:not(#movingbutton) {
  filter: invert(0%);
}
.invertfunction {
  cursor: pointer;
  position: fixed;
  top: 20px;
  left: 20px;
  width: 60px;
  height: 30px;
}
#onbutton {
  width: 60px;
  height: 30px;
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid #848484;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
}
#movingbutton{
  width: 28px;
  height: 28px;
  border-radius: 20px;
  border: 1px solid #848484;
  background-color: #BDBDBD;
  -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition: .2s ease;
}
.invertbutton #onbutton {
  background-color: #42B94E;
}
.invertbutton #movingbutton {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="invertfunction"onclick="invertFunction(this)">
  <div id="onbutton">
    <div id="movingbutton">
    </div>
  </div>
</div>
<br>
<br>
<br>
<div style="background-color: red;" height="100px" width="100px">Example div1</div>
<div style="background-color: green;" height="100px" width="100px">Example div2</div>
<div style="background-color: blue;" height="100px" width="100px">Example div3</div>
<div> 
  <img width="100px" src="http://www.lyricsmode.com/i/upictures/205882.gif">
</div>

CodePen example

点击时反转html的颜色（imgs除外）

1 个答案: