I'm very new to dreamweaver and started making my website for my course. I'm trying to make and overlay popdown for when hovering over certain text in my navbar. I managed to get it to work with one heading/text in the navbar but when trying to get it to work with the other headings with one displaying at a time it won't work. It only displays text on the page when hovering over the corresponding heading in the navbar but there is no overlay. Any help would be great thanks.
Source code:
<li onmouseover="showOverlay('overlayComputing', 'textComputing')" onmouseout="hideOverlay('overlayComputing')">
<a class="navtext" href="#"> Computing </a></li>
<li onmouseover="showOverlay('overlayConsoles', 'textConsoles')" onmouseout="hideOverlay('overlayConsoles')">
<a class="navtext" href="#"> Consoles </a></li>
<div id="overlayComputing" onmouseover="showOverlay('overlayComputing', 'textComputing')" onmouseout="hideOverlay('overlayComputing')">
<div id="textComputing" class="text">Computing</div>
</div>
<div id="overlayConsoles" onmouseover="showOverlay('overlayConsoles', 'textConsoles')" onmouseout="hideOverlay('overlayConsoles')">
<div id="textConsoles" class="text">Consoles</div>
</div>
<script>
function showOverlay(overlayId, textId) {
var overlay = document.getElementById(overlayId);
var text = document.getElementById(textId);
overlay.style.display = "block";
text.style.display = "block";
}
function hideOverlay(overlayId, textId) {
var overlay = document.getElementById(overlayId);
var text = document.getElementById(textId);
overlay.style.display = "none";
text.style.display = "none";
}
</script>
CSS:
#overlayComputing {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 80%; /* Full width (cover the whole page) */
height: 50%; /* Full height (cover the whole page) */
top: 60px;
left: 200px;
opacity: 1;
background-color: #343A40; /* Black background with opacity */
z-index: 100; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
#overlayConsoles {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 80%; /* Full width (cover the whole page) */
height: 50%; /* Full height (cover the whole page) */
top: 60px;
left: 200px;
opacity: 1;
background-color: #343A40; /* Black background with opacity */
z-index: 101; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
.text{
position: absolute;
display: none;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
ms-transform: translate(-50%,-50%);
}
7
Replies
AdChoices