Question

当我选中h1复选框时，我试图在input向下移动一些文字，向下移动20个像素。我了解+和~运算符，但这些运算符都需要input和h1来共享父代，而不是我的情况DOM：

＆＃13;

.title {
  transition: all 1s ease;
}

.box:checked ~ .title {
  transform: translateY(20px);
}

＆＃13;

<div class="some-element">
  <input type="checkbox" class="box"/>
</div>

<div class="some-other-element">
  <h1 class="title">Lorem ipsum</h1>
</div>

＆＃13;

如果我在input内移动div.some-other-element，过渡效果很好，但由于我需要input在div.some-element内，我无法做到这一点。

使用纯CSS检查div.some-other-element时，是否可以在input上触发转换？如果没有，有没有办法可以轻松地用jQuery做到这一点？

Answer 1

没有纯supportvector解决方案，因为没有css选择器。您可以使用jQuery完成它，只需parent css过渡类：

的的jQuery

toggling

<强> CSS

$('.box').on('change', function() { $(this).closest('.some-element').next('.some-other-element').find('.title').toggleClass('someclass'); });

检查以下代码段

＆＃13;
＆＃13;
.someclass{ transform: translateY(20px); } .title { transition: all 1s ease; }
＆＃13;
$('.box').on('change', function() { $(this).closest('.some-element').next('.some-other-element').find('.title').toggleClass('someclass'); });
＆＃13;
.someclass { transform: translateY(20px); } .title { transition: all 1s ease; }
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以使用is查看input是否为:checked，然后为margin-top

设置动画

$('input.box').click(function() {
  if ($(this).is(':checked')) {
    $('.title').animate({
      'margin-top': '100px'
    });
  } else {
    $('.title').animate({
      'margin-top': '20px'
    });
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some-element">
  <input type="checkbox" class="box" />
</div>

<div class="some-other-element">
  <h1 class="title">Lorem ipsum</h1>
</div>

更改已检查父元素未共享的元素

2 个答案: