0

This is the code that I am using I am trying to find a way to connect link1 and div1, link2 and div2 while link1 and link2 are on the same line like this image. I tried to use another div and tried to use span but that didn't work. I also tried to add a2 beside a1 but it made the code stop working and look weird. If anyone could help me that would be greatly appreciated!

<!DOCTYPE html>
<html>
<head>

<style>


#link1 {
  display: block;
  background-color: #004d66;
  padding: 20px;
  color: white;
  width: 85px;
}

#div1 {
  display: block;
  background-color: white;
  padding: 20px;
  color: black;
  height: 200px;
  width: 200px;
  border: solid black 1px;
}

#a1:active #div1 {
  display: block;
  background-color: #004d66;
  color: #ffbf00;
  height: 200px;
  width: 200px;
  border: solid black 1px;
}

#link1:active {
  display: block;
  background-color: #e67300;
  color: black;
  width: 85px;

}



#link2 {
  display: block;
  background-color: #2c9c8d;
  padding: 20px;
  color:black;
  width: 105px;
}

#div2 {
  display: block;
  background-color: white;
  padding: 20px;
  color: black;
  height: 200px;
  width: 200px;
  border: solid black 1px;
}

#a2:active #div2 {
  display: block;
  background-color: #2a9d8f;
  color: #ffbf00;
  height: 200px;
  width: 200px;
  border: dotted green 10px;
}

#a2:active #a1 {
  display: block;
  background-color: #8cb47c;
  color: #ffbf00;
  height: 200px;
  width: 200px;
  border: solid black 1px;
}

#link2:active {
  display: block;
  background-color: #e67300;
  color: black;
  width: 105px;

}

</style>

</head>
<body>

<a id="a1">
 <h3 id="link1">First Link</h3>
 <div id="div1">Div 1 here</div>
</a>

<a id="a2">
 <h3 id="link2">Second Link</h3>
 <div id="div2">Div 2 here</div>
</a>

</body>
</html>
V0RT3X
  • 1
  • Just an observation, #a2:active #a1 will not do anything as the state of a sibling after an element cannot affect that element in current CSS. – A Haworth Jan 23 '22 at 11:51

0 Answers0