I am trying to create an html page that has a section that appears when an element is hovered over. I did this by using :hover + .myclass in my CSS. It was working fine until I tried positioning the elements.My div that needed to appear had a background color, but when I positioned the elements in the div, the background color disappeared! Here is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript, Social">
<meta name="description" content="Web-app to find and befriend new people!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu {
display: block;
position: fixed;
top:0%;
left:0%;
height: 100%;
width: 3%;
padding:0%;
margin: 0%;
background-color: greenyellow;
}
.big_menu {
display: none;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
.big_menu:hover {
display: block;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
.menu:hover + .big_menu {
display: block;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
</style>
</head>
<body>
<div class="menu">
<p style="position: absolute; top: 5%; left: 5.8%">Home</p>
</div>
<div class="big_menu">
<p style="position: absolute; top: 5%; left: 5.8%;">Details</p>
</div>
</body>
</html>Can someone please explain to me why this is happening and how to fix it?
ETA the Correct Answer:
Temani's answer was correct, but I can elaborate a bit: elements positioned absolutely are removed from the flow of the document. Simply removing the absolute position from the second p element is enough to get the background to show