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

Question

看看我的JSfiddle就在这里 ; 现在当你点击红色方块时，它会填满，但是当我点击红色方块时 ，如何让它填满绿色方块呢？ 这就像点击一个元素并在其他东西上激活它？

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

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

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

Answer 1

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

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

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

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

需要注意的是如果.green元素不紧跟.red元素，那么你也可以使用一般的兄弟选择（ ~ ）太。

Answer 2

试试这个：

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

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

Answer 3

如果我理解正确，你可以通过使用类'active'和toggleClass()而不是伪选择器来做到这一点:active

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

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

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

Answer 4

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

看看这个jsfiddle

https://jsfiddle.net/fed92oxr/

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


.red {
  border: solid 10px red;
  width: 50px;
  height: 50px;
}

.green {
  border: solid 10px green;
  width: 50px;
  height: 50px;
  margin-top: 60px;
  margin-left: -10px;
}

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