0

I am trying to get a div element to transition when an a element is clicked using pure CSS. Here is my code so far:

HTML:

<div id="red"></div>

<a href="#" id="click">Click me</a>

CSS:

div#red {width: 100px;
        height: 100px;
        background-color: red;
        transition: 2s ease;}

a#click:active~ #red {width: 300px;}

I have a feeling what I am trying to do is not possible. Does the transition have to occur on the same element that was clicked?

ALR
  • 441
  • 2
  • 7
  • 19
  • You can only do it if it is the next sibling - ie the red div comes after the anchor - https://jsfiddle.net/55tLpkhb/ – Pete May 12 '17 at 08:37
  • That's not correct. It does only have to come after the clickable element and both need to share the parent element. It does not necessarily have to be the next sibling ("neighbor"). – connexo May 12 '17 at 08:52

0 Answers0