I was thinking about the possibility of linking one style to another using events like :focus or :hover in CSS alone, without the need for JavaScript.
For instance, can the class "hitArea" change the background attribute of "changeArea" when it is in focus?
.changeArea { background: yellow; }
.hitArea div:focus { changeArea: changeBG; }
.changeArea changeBG { background: blue; }
While I am aware of communication between styles during CSS animations, as shown in this working example:
.reveal {
position: absolute;
top: 190px;
left: 0px;
margin-left: 0px;
-webkit-animation-name: reveal;
-webkit-animation-duration: 0.1s;
-webkit-animation-fill-mode: backwards;
-webkit-animation-delay: 0.2s;
animation-name: reveal;
animation-duration: 0.1s;
animation-fill-mode: backwards;
animation-delay: 0.2s;
}
@-webkit-keyframes reveal {
0% { left: -900px; -webkit-animation-timing-function: linear; }
99% { left: -900px; -webkit-animation-timing-function: linear; }
100% { left: 0px; }
}
I'm curious about the syntax and whether it's possible to establish communication between other styles.