Currently, I'm struggling with a CSS code issue. My goal is to have the div #hidden show when someone hovers over the link in #trigger.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#hidden {
display: none;
position: absolute;
top: 20px;
left: 100px;
border: 1px solid red;
}
#trigger {
border: 1px solid white;
background: red;
}
#trigger:hover #hidden {
display: block !important;
}
</style>
</head>
<body>
<div id="hidden">
This hidden div.
</div>
<span id="trigger">
<a href="#">Show</a>
</span>
</body>
</html>
I'm perplexed as to why this code isn't working. I've used similar code successfully in many other instances. What could be the issue here?