1

this is structure of html

<div class="parent">     
    <div class="child1" style="background: red;"></div>     
    <div class="child2" style="background: blue;"></div>  
</div>

i want to make border-color of .parent element red when i hover over .child1 and blue when i hover over .child2

using only CSS.

is it possible.

i am new to web, so i ask on chatGPT. it produce some garbage code that didn't work.

.parent:hover {
  border-color: red;
}

.child1:hover ~ .parent {
  border-color: blue;
}

.child2:hover ~ .parent {
  border-color: green;
}
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
manoj_joshi
  • 31
  • 3
  • _"i am new to web, so i ask on chatGPT."_ - you should rather not do that; that is in no way a proper way to _learn_ stuff. – CBroe Apr 17 '23 at 11:59

1 Answers1

2

finally i got my answer.

:has() solved my problem. here is the css code

.parent:has(.child1:hover){
   border-color: red;
}
.parent:has(.child2:hover){
   border-color: blue;
}

here is the page that i was working on.

codePen: https://codepen.io/manoj1310/pen/WNaxRqa

manoj_joshi
  • 31
  • 3
  • _":has() solved my problem."_ - hope you are aware of the browser support? In Firefox this will currently only work, if the user explicitly activates it by changing the corresponding flag in their configuration - https://caniuse.com/css-has – CBroe Apr 17 '23 at 11:58