Question

检查我的JSfiddle右here; 现在当你点击红色方块时，它会填满，但是当我点击红色方块时，如何让它填满绿色方块？它就像点击一个元素并制作一样它会激活其他东西吗？

我希望能够点击某些东西然后其他东西需要做某事，而不是相同的元素，没有javascript，是可能的吗？

＆＃13;

.red {
  border: solid 10px red;
  width: 50px;
  height: 50px;
}

.green {
  border: solid 10px green;
  width: 50px;
  height: 50px;
}

.red:active {
  background-color: red;
}

＆＃13;

<div class="red"></div>
<div class="green"></div>

＆＃13;

Answer 1

您可以使用CSS与兄弟选择器+实现此目的，如下所示：

.red:active + .green {
  background-color: green;
}

＆＃13;

.red {
  border: solid 10px red;
  width: 50px;
  height: 50px;
}

.green {
  border: solid 10px green;
  width: 50px;
  height: 50px;
}

.red:active {
  background-color: red;
}

.red:active + .green {
  background-color: green;
}

＆＃13;

<div class="red"></div>

<div class="green"></div>

＆＃13;

请注意，如果.green元素不紧跟.red元素，那么您也可以使用通用兄弟选择器（~）。

Answer 2

试试这个：

    .red:active + .green {
    background-color:green;
}

但请记住，绿色类元素必须在之后红色元素。

Answer 3

如果我理解正确，你可以通过使用课程“活跃”来做到这一点。和toggleClass()而不是伪选择器:active

＆＃13;

$('.red').click(function(){ 
	$('.green').toggleClass('active');
});

＆＃13;

.red {
  border: solid 10px red;
  width: 50px;
  height: 50px;
}

.green {
  border: solid 10px green;
  width: 50px;
  height: 50px;
}

.red.active  {
  background-color:red;
}

.green.active  {
  background-color:green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">

</div>

<div class="green">
</div>

＆＃13;

Answer 4

是的，但是您需要更改布局，以便绿色在红色内。

看看这个jsfiddle

https://jsfiddle.net/fed92oxr/

arr.some(obj => Boolean(obj.value))

HTML / CSS如何在单击：active或：hover时触发另一个元素？

4 个答案: