| <style> |
| .box { position: relative; width: 100px; height:100px; } |
| a { display: block; position: relative; width: 100px; height:100px; background-color: green; } |
| a:visited { background-color: red; } |
| .background { background-color: green; } |
| .multiply { mix-blend-mode: multiply; } |
| </style> |
| <div> |
| <div class="box background"> |
| <a class="multiply"></a> |
| </div> |
| <div class="box background"> |
| <a class="multiply" href=""></a> |
| </div> |
| <div class="box background"> |
| <div class="box multiply"> |
| <a></a> |
| </div> |
| </div> |
| <div class="box background"> |
| <div class="box multiply"> |
| <a href=""></a> |
| </div> |
| </div> |
| <div class="box background"> |
| <div class="box add_multiply"> |
| <a></a> |
| </div> |
| </div> |
| <div class="box background"> |
| <div class="box add_multiply"> |
| <a href=""></a> |
| </div> |
| </div> |
| </div> |
| <script> |
| document.body.offsetLeft; |
| for (element of document.querySelectorAll(".add_multiply")) |
| element.classList.add("multiply"); |
| </script> |