Hover on div for switching border bottom on child element

HTML & CSS
1

Hi
I am trying to use hovering on div to switch borders on child element (combinators). in one way it works but in an other one doesn’t
my codepen:

can I get help? I tried different things but nothing works.
this is working, the above don’t

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: lightgreen;
}
.dv:hover p{
  background-color: pink;
}
.underLine{
		  height:6px;	
		  background-color:white;
		  border-top:2px solid lightgray;
		  border-bottom:2px solid lightgray;
		} 
#box1:hover .underLine{
          background-color:white;
		  border-top:2px solid green;
		  border-bottom:2px solid green;
}     
</style>
</head>
<body>
<div class="dv0">
<div id="box1" class="dv">
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
  <div class="underLine"></div>
</div>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>
2

You have errors in the codepen CSS.

You use round () brackets instead of {} on the rule in question and you use html comments <!-- --> instead of css comments /* css comments */.

Correct the errors and try again.:slight_smile:

3 Likes
3

thank you very much, it works, lovely, frank

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.