Pseudo-classes 1

<p>
  Hover over this paragraph to see some color change. Also hover over each of the links below
</p>
<a href="#" id="link1">
  Link 1
</a>
<br></br>
<a href="#" id="link2">
  Link 2
</a>

p:hover {
  color: brown;
}
#link1:hover {
  text-decoration: none;
}
#link2:hover {
  color: green;
}

<div>
  Hover over me to see the paragraph element
</div>
<p>
  You can see me
</p>

p {
  position: absolute;
  display: none;
  background-color: orange;
  padding: 8px;
}

div:hover + p {
  display: block;
}