While hovering over the <a>, I noticed that it changes color correctly. However, when I hover over the <p>, nothing seems to happen. It's puzzling why the <p> does not change color upon being hovered over.
If I switch the selector to p:hover, then the <p> responds as expected when hovered (but unfortunately, the <a> stops working). Is there a way to make both the <p> and the <a> change color while being hovered over with just one rule? And why isn't this functioning as anticipated?
<html>
<head>
<style>
:hover {
background-color: black;
color: white;
}
</style>
</head>
<body>
<p>some text</p>
<a href="https://stackoverflow.com">stackoverflow</a>
</body>
</html>
For potential future editors: This code will not showcase the issue in a Stack Snippet due to quirks mode in browsers, something that cannot be replicated within Stack Snippets